最精简的 Websocket 实例_最干净的websocket-CSDN博客

本文链接：https://blog.csdn.net/henryhu712/article/details/85084118

创建一个 HTML 文件，内容为：

<!DOCTYPE html>
<html>
  <header>
    <script>
      var ws = new WebSocket("ws://echo.websocket.org");
      ws.onopen = function() {
        ws.send("Test!");
      };
      ws.onmessage = function(ev) {
        console.log(ev.data);
        ws.close();
      };
      ws.onclose = function(ev) {
        console.log("WebSocketClosed!");
      };
      ws.onerror = function(ev) {
        console.log("WebSocketError!");
      };
    </script>
  </header>
  <body>
    <p>The Simplest Websocket Example</p>
  </body>
</html>

在浏览器里打开这个文件，结果如下：
在这里插入图片描述

解释如下：

脚本开始时创建一个WebSocket对象，参数是需要连接的服务器端的地址，同 http 协议使用 http:// 开头一样，WebSocket 协议的 URL 使用 ws:// 开头，另外安全的 WebSocket 协议使用 wss:// 开头。

当调用 new WebSocket(url) 接口时，浏览器就开始了与地址为 url 的 WebServer 建立握手连接的过程。

随后是 WebSocket 对象注册消息的处理函数，WebSocket对象一共支持四个消息

onopen
onmessage
onclose
onerror

当浏览器和 WebSocket 服务器连接成功后，会触发 onopen 消息；
如果连接失败，发送、接收数据失败或者处理数据出现错误，浏览器会触发onerror消息；
当浏览器接收到 WebSocket 服务器发送过来的数据时，就会触发 onmessage消息，参数 ev 中包含服务器传输过来的数据；
当浏览器接收到 WebSocket 服务器端发送的关闭连接请求时，就会触发 onclose 消息。