WebSocket 协议本质上是一个基于 TCP 的协议。
    为了建立一个 WebSocket 连接,客户端浏览器首先要向服务器发起一个 HTTP 请求,这个请求和通常的 HTTP 请求不同,包含了一些附加头信息 ,其中附加头信息”Upgrade: WebSocket”表明这是一个申请协议升级的 HTTP 请求,服务器端解析这些附加的头信息然后产生应答信息返回给客户端,客户端和服务器端的 WebSocket 连接就建立起来了,双方就可以通过这个连接通道自由的传递信息,并且这个连接会持续存在直到客户端或者服务器端的某一方主动的关闭连接。

    1. <input type="text" id="T">
    2. <button id="B">发送</button>
    3. <script>
    4. // 点击事件发送给服务端消息
    5. B.onclick=function () {
    6. var val=T.value;
    7. ws.send(val);
    8. }
    9. // 打开一个 web socket 连接端口8000
    10. var ws = new WebSocket("ws://localhost:8000");
    11. // 建立连接事件
    12. ws.onopen=function () {
    13. console.log("连接建立");
    14. }
    15. // 接收消息事件
    16. ws.onmessage=function (e) {
    17. // 服务端返回数据时,在此处处理
    18. console.log(e.data);
    19. }
    20. // 连接关闭事件
    21. ws.onclose=function () {
    22. // 关闭连接方法
    23. ws.close();
    24. }
    25. </script>

    建立长连接 :
    image.png
    消息发送与回复 :
    image.png