WebSocketTest
/
websocket.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>Websocket测试</title>

    <script type="text/javascript">
        /*
          [Constructor(DOMString url, optional (DOMString or DOMString[]) protocols)]
          interface WebSocket : EventTarget {
          readonly attribute DOMString url;

          // ready state
          const unsigned short CONNECTING = 0;
          const unsigned short OPEN = 1;
          const unsigned short CLOSING = 2;
          const unsigned short CLOSED = 3;
          readonly attribute unsigned short readyState;
          readonly attribute unsigned long bufferedAmount;

          // networking
                   attribute EventHandler onopen;
                   attribute EventHandler onerror;
                   attribute EventHandler onclose;
          readonly attribute DOMString extensions;
          readonly attribute DOMString protocol;
          void close([Clamp] optional unsigned short code, optional DOMString reason);

          // messaging
                   attribute EventHandler onmessage;
                   attribute DOMString binaryType;
          void send(DOMString data);
          void send(Blob data);
          void send(ArrayBuffer data);
          void send(ArrayBufferView data);
        };
        */

		function KNewWebSocket()
		{
			//let websocketUrl = 'ws://localhost:7681';
			//var websocketUrl = 'ws://127.0.0.1:7681';
			//return new WebSocket(websocketUrl);
			let websocketUrl = document.getElementById('serverAddr').value;

			let protocol = document.getElementById("websocketProtocols").value;
			if(protocol.length > 0)
			{
				return new WebSocket(websocketUrl, protocol);//, 'lws-minimal');
			}
			else
			{
				return new WebSocket(websocketUrl);//, 'lws-minimal');
			}

		};


        function WebSocketTest() {
            if ("WebSocket" in window) {
                alert("您的浏览器支持 WebSocket!");

                // 打开一个 web socket
                //var ws = new WebSocket("ws://localhost:9998/echo");
                var ws = KNewWebSocket();//new WebSocket(websocketUrl);

                ws.onopen = function () {
                    // Web Socket 已连接上，使用 send() 方法发送数据
                    ws.send("WebSocket发送数据");
                    console.log("数据发送中...");
                };
                ws.onerror = function(e){
                    console.log("error " + e);
                };

                ws.onmessage = function (evt) {
                    var received_msg = evt.data;
                    console.log(received_msg);
                    console.log("数据已接收...");
                };

                ws.onclose = function (e) {
                    // 关闭 websocket
                    //alert("连接已关闭...");
                    console.log("connect closed:" + e.code);
                };
            }

            else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        }
        /////////////////////////////////////////////////////
        var socket;
        function Connect() {
            try {
                socket = KNewWebSocket();//new WebSocket(websocketUrl, 'lws-minimal');
            } catch (e) {
                console.log('error');
                return;
            }
            socket.onopen = sOpen;
            socket.onerror = sError;
            socket.onmessage = sMessage;
            socket.onclose = sClose;
        }
        function sOpen() {
            console.log('connect success!');
        }
        function sError(e) {
            console.log("error "); // + e.msg);
        }
        function sMessage(msg) {
            console.log('server says:' + msg.data);
        }
        function sClose(e) {
            console.log("connect closed:" + e.code);
        }
        function Send() {
            socket.send(document.getElementById("msg").value);
            //socket.send("DDDDDDDDDD");
        }
        function Close() {
            socket.close();
        }
    </script>

</head>
<body>

    <div id="sse">
        <a href="javascript:WebSocketTest()">运行 WebSocket</a>
    </div>
    <div id="sse2">
		<label>server addr</label>
        <input id="serverAddr" type="text" value='ws://localhost:7681'>
		<br/>

		<label>WebSocket subprotocol:</label>
        <input id="websocketProtocols" type="text" value='lws-minimal'>
		<br/>

		<label>发送的内容：</label>
        <input id="msg" type="text">
		<br/>

        <button id="connect" onclick="Connect();">Connect</button>
        <button id="send" onclick="Send();">Send</button>
        <button id="close" onclick="Close();">Close</button>
    </div>
</body>
</html>