WebSocket简介

发表于 | | 阅读次数

WebSocket 是一种基于TCP的提供全双工/双向通信的通信协议，因为它原生支持跨域，且安全性较高，而且上手容易，是很好的跨域解决方案，甚至可以很容易的搭建一个聊天室。

使用方法

客户端

1
2
//WebSocket接收两个参数，一个是URL(必须的)，一个是所使用的子协议（可选），可以是字符串也可以是数组，没有指定则为空字符。http使用ws，https使用wss
var ws = new WebSocket('ws://hostname:port')

服务器(NodeJS)

1
2
3
//create WebSocket Server
var WebSocketServer = require('ws').Server;
var wss = new WebSocketServer({port: 8181});

WebSocket事件

  • open

    1
    2
    3
    ws.onopen = function(e) {
        ...
    }

  • message

    1
    2
    3
    ws.onmessage = function(e) {
        ...
    }

  • error

    1
    2
    3
    ws.onerror = function(e) {
        ...
    }

  • close

    1
    2
    3
    ws.onclose = function(e) {
        ...
    }

WebSocket方法

  • send()
    可以传输两种类型的之：string和binary；因为WebSocket是事件驱动的协议，所以必须确保连接已经打开并且已经准备好接收信息了。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var ws = new WebSocket('ws://localhost:8181');
    ws.onopen = function(e) {
        ws.send(JSON.stringigy(stock_request));
    }
    //or
    function processEvent(e) {
        if(ws.readState === WebSocket.OPEN) {
            //Socket open, send
            ws.send(e);
        } else {
            //Show an error, queue it for sending later, etc
        }
    }

  • close()

    1
    2
    3
    ws.close();
    //or pass a numeric code and human-readable string
    ws.close(100, "Goodbye, World!");

WebSocket close()方法状态码
https://developer.mozilla.org/zh-CN/docs/Web/API/CloseEvent

WebSocket 属性

当open事件触发后，WebSocket对象会有几个属性可以被客户端应用读取。

  • readyState
    | 属性名| 值| 描述|
    | :——– | ——–:|:– |
    | WebSocket.CONNECTING| 0 | 连接还未打开|
    | WebSocket.OPEN| 1 | 连接已打开并准备通信|
    | WebSocket.CLOSING | 2 | 正在关闭连接 |
    | WebSocket.CLOSED | 3 | 连接已关闭 |

  • bufferedAmount
    常用于发送二进制数据，确保在连接关闭前所有数据已经发送或者在客户端执行某些限制

  • protocol
    服务器端所采用的子协议（在使用WebSocket构造器时指定的protocol参数，如果服务器没有采用则为空）

更多WebSocket详细信息参考MDN的WebSocket API