Fork me on GitHub

webSocket

webSocket是什么

  • webSocket是HTML5新出的一种协议,底层是基于TCP/IP协议的。跟http没有关系,只是复用了http握手通道,用来升级协议。

webSocket的作用

  • 轮询:客户端以一定的时间间隔向服务端发出请求,以频繁请求的方式来保持客户端和服务器端的同步。缺点:
    • 浏览器需要不断的向服务器发出请求,然而HTTP请求可能包含较长的头部,其中真正有效的数据可能只是很小的一部分,显然这样会浪费很多的带宽等资源
  • 长轮询:浏览器向服务器发送请求,服务器将请求保持打开一段时间。如果在该时间段内收到通知,则将包含该消息的响应发送到客户端。如果在设定的时间段内未收到通知,则服务器发送响应以终止打开的请求。缺点:
    • 当具有较高的消息量时,长轮询不会提供比传统轮询更大的性能改进
    • 服务器端阻塞请求直到有数据传递超时才返回。
  • 使用webSocket浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。优点:
    • 能更好的节省服务器资源和带宽
    • 支持双向通信实时性更强
    • 可以发送文本,也可以发送二进制数据

webSocket的使用

服务端
  • 代码如下,监听8080端口。当有新的连接请求到达时,打印日志,同时向客户端发送消息。当收到到来自客户端的消息时,同样打印日志:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    var app = require('express')();
    var server = require('http').Server(app);
    var WebSocket = require('ws');

    var wss = new WebSocket.Server({ port: 8080 });

    // 当有新的连接请求到达时
    wss.on('connection', function connection(ws) {
    console.log('server: receive connection.');
    // 当收到到来自客户端的消息时
    ws.on('message', function incoming(message) {
    console.log('server: received: %s', message);
    });

    // 向客户端发送消息
    ws.send('world');
    });

    app.get('/', function (req, res) {
    res.sendfile(__dirname + '/index.html');
    });

    app.listen(3000);
客户端
  • 代码如下,向8080端口发起WebSocket连接。连接建立后,打印日志,同时向服务端发送消息。接收到来自服务端的消息后,同样打印日志:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script>
    // 向8080端口发起WebSocket连接
    var ws = new WebSocket('ws://localhost:8080');
    // 连接建立后
    ws.onopen = function () {
    console.log('ws onopen');
    ws.send('from client: hello');
    };
    // 接收到来自服务端的消息后
    ws.onmessage = function (e) {
    console.log('ws onmessage');
    console.log('from server: ' + e.data);
    };
    </script>
  • 服务端输出:

    1
    2
    server: receive connection.
    server: received from client: hello
  • 客户端输出:

    1
    2
    3
    client: ws onopen
    client: ws onmessage
    client: received from server: world

webSocket应用场景

  • 社交聊天、弹幕、多玩家游戏、协同编辑、股票基金实时报价、体育实况更新、视频会议/聊天、基于位置的应用、在线教育、智能家居等需要高实时的场景。

参考资料:

------ 本文结束 ------