一、前言

我们知道websocket是一个 ws://*** 连接，我们可以调用网站 websocket.org 的 ws://echo.websocket.org 作为前端调用服务端的地址
只是 3 种 [ 写法 ]，不是 3 种 [ 方法 ]

二、使用

写法1

请参考我这一篇Go gorilla websocket 小试牛刀，使用其中的 client.html 文件，修改服务端地址为 ws://echo.websocket.org 即可。
效果如图
在这里插入图片描述

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>websocket实现消息推送</title>
    <script>
        window.addEventListener("load",function (event) {
            let output = document.getElementById("output")
            let input = document.getElementById("input")
            let ws
            let print = function (message) {
                let d=document.createElement("div")
                d.innerHTML = message
                output.appendChild(d)
            }

            document.getElementById("open").onclick = function (event) {
                if(ws){
                    return false
                }
                ws = new WebSocket("ws://echo.websocket.org");
                ws.onopen = function (event) {
                    print("打开")
                }
                ws.onclose = function (event) {
                    print("关闭")
                    ws = null
                }

                ws.onmessage = function (event) {
                    print("响应："+event.data)
                }
                ws.onerror = function (event) {
                    print("错误："+event.data)
                }
                return false
            }

            document.getElementById("send").onclick = function (event) {
                if(!ws){
                    return false
                }
                print("发送："+input.value)
                ws.send(input.value)
                return false
            }

            document.getElementById("close").onclick = function (event) {
                ws.close()
                return false
            }
        })
    </script>
</head>
<body>
<table>
    <tr>
        <td valign="top" width="50%">
            <p>
                点击:<br>
                “打开”和服务端创建一个连接。<br>
                "发送"发送一个消息给服务端。<br>
                "关闭"去关闭连接.<br>
                你可以改变消息Message并且发送多次.<br>
            </p>
            <form>
                <button id="open">打开</button>
                <button id="close">关闭</button><br>
                <input  id="input" type="text" value="Websocket —— Go">
                <button id="send">发送</button><br>
            </form>
        </td>
        <td valign="top" width="50%">
            <div id="output"></div>
        </td>
    </tr>
</table>

</body>
</html>

写法2

使用 http://www.websocket.org/echo.html中的demo，就在这个页面下面。
效果如图
在这里插入图片描述

代码如下

<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>
<script language="javascript" type="text/javascript">

    var wsUri = "wss://echo.websocket.org/";
    var output;

    function init()
    {
        output = document.getElementById("output");
        testWebSocket();
    }

    function testWebSocket()
    {
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(evt) { onOpen(evt) };
        websocket.onclose = function(evt) { onClose(evt) };
        websocket.onmessage = function(evt) { onMessage(evt) };
        websocket.onerror = function(evt) { onError(evt) };
    }

    function onOpen(evt)
    {
        writeToScreen("CONNECTED");
        doSend("WebSocket rocks");
    }

    function onClose(evt)
    {
        writeToScreen("DISCONNECTED");
    }

    function onMessage(evt)
    {
        writeToScreen('<span style="color: blue;">RESPONSE: ' + evt.data+'</span>');
        websocket.close();
    }

    function onError(evt)
    {
        writeToScreen('<span style="color: red;">ERROR:</span> ' + evt.data);
    }

    function doSend(message)
    {
        writeToScreen("SENT: " + message);
        websocket.send(message);
    }

    function writeToScreen(message)
    {
        var pre = document.createElement("p");
        pre.style.wordWrap = "break-word";
        pre.innerHTML = message;
        output.appendChild(pre);
    }

    window.addEventListener("load", init, false);

</script>

<h2>WebSocket Test</h2>

<div id="output"></div>

写法3

自己写一个，使用try{}catch(){}捕获异常
效果如图
在这里插入图片描述

代码如下

<!DOCTYPE html>
<meta charset="utf-8" />
<title>WebSocket Test</title>

<h2>WebSocket 连接测试</h2>
<div id="output"></div>

<script language="javascript" type="text/javascript">
    //消息打印
    var output = document.getElementById("output");
    var print = function (message) {
        var d=document.createElement("div")
        d.innerHTML = message
        output.appendChild(d)
    };

    //websocket连接
    var wsUri = "wss://echo.websocket.org/";
    testWebSocket(wsUri);

    function testWebSocket(wsUri){
        var webSocket = new WebSocket(wsUri);
        //接收消息
        webSocket.onmessage = function(event){
            //捕获异常
            try {
                var obj = JSON.parse(event.data);
                if (typeof obj == 'object' && obj) {
                    print(obj);
                    console.log(obj);
                }
            } catch (e) {
                print('catch-error' + event.data + ' json解析异常 ' + e);
                console.log('catch-error' + event.data + ' json解析异常 ' + e);
            }
        }.bind(this);
        //连接成功
        webSocket.onopen = function () {
            print('connect-success');
            console.log('connect-success')
        };
        //连接关闭
        webSocket.onclose = function (event) {
            print('connect-close：' + event.data);
            console.log('connect-close：' + event.data)
        };
        //连接异常
        webSocket.onerror = function (event) {
            print('connect-error：' + event.data);
            console.log('connect-error：' + event.data);
        }
    }
</script>