WebSocket 入门

WebSocket 入门

1、WebSocket 是一种网络通信协议。

2、为什么需要 WebSocket？ 因为通过它服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。而 HTTP 协议的通信只能由客户端发起。

3、协议标识符是 ws（如果加密，则为 wss），服务器网址就是 URL。eg：ws://example.com:80/some/path。

4、WebSocket 对象

简介：  
    WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。

构造函数：
    `WebSocket(url[, protocols])`  返回一个 WebSocket 对象

属性：
    WebSocket.binaryType
    使用二进制的数据类型连接

    WebSocket.bufferedAmount 只读
    未发送至服务器的字节数

    WebSocket.extensions 只读
    服务器选择的扩展

    WebSocket.onclose
    用于指定连接关闭后的回调函数

    WebSocket.onerror
    用于指定连接失败后的回调函数

    WebSocket.onmessage
    用于指定当从服务器接受到信息时的回调函数

    WebSocket.onopen
    用于指定连接成功后的回调函数

    WebSocket.protocol 只读
    服务器选择的下属协议

    WebSocket.readyState 只读
    当前的链接状态

    WebSocket.url 只读
    WebSocket 的绝对路径

方法：
    WebSocket.close([code[, reason]])
    关闭当前链接

    WebSocket.send(data)
    向服务器发送数据

示例：
    // Create WebSocket connection.
    const socket = new WebSocket('ws://localhost:8080');

    // Connection opened
    socket.addEventListener('open', function (event) {
    socket.send('Hello Server!');
    });

    // Listen for messages
    socket.addEventListener('message', function (event) {
    console.log('Message from server ', event.data);
    });

5、客户端的简单示例

var ws = new WebSocket("wss://echo.WebSocket.org");

ws.onopen = function(event) {
  console.log("Connection open ...");
  ws.send("Hello WebSocket!");
}

ws.onmessage = function(event) {
  console.log("Received Message: " + event.data);
  ws.close();
}

ws.onclose = function(event) {
  console.log(Connection closed.)
}

6、WebSocket 客户端的 API

(1) WebSocket 构造函数
WebSocket 对象作为一个构造函数，用于新建 WebSocket 实例。eg：var ws = new WebSocket('ws://localhost:8080'); 执行语句之后，客户端就会与服务器进行连接。

(2) webSocket.readyState

# readyState属性返回实例对象的当前状态，共有四种

CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信了。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

(3) webSocket.onopen

# 实例对象的 onopen 属性，用于指定连接成功后的回调函数
ws.onopen = function () {
  ws.send('Hello Server!');
}

# 如果要指定多个回调函数，可以使用 addEventListener 方法
ws.addEventListener('open',
  function fun1 (event) { ws.send('Hello Server1!');},
  function fun2 (event) { ws.send('Hello Server2!');}
);

参考博客

WebSocket
WebSocket 教程