socket.io和websockets之间的区别

node.js中的socket.io和websockets有什么区别?
他们都是服务器推送技术吗? 我觉得唯一的区别是,

  • socket.io允许我通过指定事件名称来发送/发送消息。

  • 在socket.io的情况下,服务器的消息将在所有客户端上传递,但对于websockets中的消息,我不得不保留所有连接的数组,并通过循环来向所有客户端发送消息。

  • 另外,我想知道为什么Web检查员(如Chrome / firebug / fiddler)无法从服务器捕获这些消息(来自socket.io/websocket)?

    请澄清这一点。


    Socket.IO尽可能使用WebSockets。

    它的优点是它可以像#2中所描述的那样简化WebSocket的使用,并且在浏览器或服务器上不支持WebSocket的情况下,它可能更重要的是为其他协议提供故障转移。 我会避免直接使用WebSockets,除非您非常熟悉它们不起作用的环境,并且能够解决这些限制。

    这是对WebSockets和Socket.IO的很好的阅读。

    http://davidwalsh.name/websocket


    误区

    关于WebSocket和Socket.IO几乎没有什么常见的误解:

  • 第一个误解是,使用Socket.IO比使用WebSocket要容易得多,但似乎并非如此。 看下面的例子。

  • 第二个误解是WebSocket在浏览器中不被广泛支持。 请参阅下面的更多信息。

  • 第三个误解是,Socket.IO将连接降级为旧版浏览器的后备。 它实际上假定浏览器是旧的,并开始与服务器建立AJAX连接,在交换一些流量后,该连接稍后会在支持WebSocket的浏览器上升级。 详情请参阅下文。

  • 我的实验

    我编写了一个npm模块来演示WebSocket和Socket.IO的区别:

  • https://www.npmjs.com/package/websocket-vs-socket.io
  • https://github.com/rsp/node-websocket-vs-socket.io
  • 这是一个服务器端和客户端代码的简单示例 - 客户端使用WebSocket或Socket.IO连接到服务器,服务器以1秒为间隔发送三条消息,这些消息由客户端添加到DOM。

    服务器端

    比较使用WebSocket和Socket.IO的服务器端示例在Express.js应用程序中执行相同操作:

    WebSocket服务器

    使用Express.js的WebSocket服务器示例:

    var path = require('path');
    var app = require('express')();
    var ws = require('express-ws')(app);
    app.get('/', (req, res) => {
      console.error('express connection');
      res.sendFile(path.join(__dirname, 'ws.html'));
    });
    app.ws('/', (s, req) => {
      console.error('websocket connection');
      for (var t = 0; t < 3; t++)
        setTimeout(() => s.send('message from server', ()=>{}), 1000*t);
    });
    app.listen(3001, () => console.error('listening on http://localhost:3001/'));
    console.error('websocket example');
    

    来源:https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.js

    Socket.IO服务器

    使用Express.js的Socket.IO服务器示例:

    var path = require('path');
    var app = require('express')();
    var http = require('http').Server(app);
    var io = require('socket.io')(http);
    app.get('/', (req, res) => {
      console.error('express connection');
      res.sendFile(path.join(__dirname, 'si.html'));
    });
    io.on('connection', s => {
      console.error('socket.io connection');
      for (var t = 0; t < 3; t++)
        setTimeout(() => s.emit('message', 'message from server'), 1000*t);
    });
    http.listen(3002, () => console.error('listening on http://localhost:3002/'));
    console.error('socket.io example');
    

    来源:https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.js

    客户端

    比较使用WebSocket和Socket.IO的客户端示例在浏览器中执行相同操作:

    WebSocket客户端

    使用vanilla JavaScript的WebSocket客户端示例:

    var l = document.getElementById('l');
    var log = function (m) {
        var i = document.createElement('li');
        i.innerText = new Date().toISOString()+' '+m;
        l.appendChild(i);
    }
    log('opening websocket connection');
    var s = new WebSocket('ws://'+window.location.host+'/');
    s.addEventListener('error', function (m) { log("error"); });
    s.addEventListener('open', function (m) { log("websocket connection open"); });
    s.addEventListener('message', function (m) { log(m.data); });
    

    来源:https://github.com/rsp/node-websocket-vs-socket.io/blob/master/ws.html

    Socket.IO客户端

    使用vanilla的Socket.IO客户端示例JavaScript:

    var l = document.getElementById('l');
    var log = function (m) {
        var i = document.createElement('li');
        i.innerText = new Date().toISOString()+' '+m;
        l.appendChild(i);
    }
    log('opening socket.io connection');
    var s = io();
    s.on('connect_error', function (m) { log("error"); });
    s.on('connect', function (m) { log("socket.io connection open"); });
    s.on('message', function (m) { log(m); });
    

    资料来源:https://github.com/rsp/node-websocket-vs-socket.io/blob/master/si.html

    网络流量

    要查看网络流量的差异,您可以运行我的测试。 以下是我得到的结果:

    WebSocket结果

    2个请求,1.50 KB,0.05秒

    从这两个请求中:

  • HTML页面本身
  • 连接升级到WebSocket
  • (连接升级请求在具有101交换协议响应的开发人员工具上可见。)

    Socket.IO结果

    6个请求,181.56 KB,0.25秒

    从这6个请求中:

  • HTML页面本身
  • Socket.IO的JavaScript(180千字节)
  • 首先长时间轮询AJAX请求
  • 第二个长轮询AJAX请求
  • 第三次轮询AJAX请求
  • 连接升级到WebSocket
  • 截图

    我在本地主机上获得的WebSocket结果:

    WebSocket结果 -  websocket-vs-socket.io模块

    我在localhost上得到的Socket.IO结果:

    Socket.IO结果 -  websocket-vs-socket.io模块

    测试自己

    快速开始:

    # Install:
    npm i -g websocket-vs-socket.io
    # Run the server:
    websocket-vs-socket.io
    

    在浏览器中打开http:// localhost:3001 /,使用Shift + Ctrl + I打开开发人员工具,打开“网络”选项卡并使用Ctrl + R重新加载页面以查看WebSocket版本的网络流量。

    在浏览器中打开http:// localhost:3002 /,使用Shift + Ctrl + I打开开发人员工具,打开“网络”选项卡并使用Ctrl + R重新加载页面以查看Socket.IO版本的网络流量。

    要卸载:

    # Uninstall:
    npm rm -g websocket-vs-socket.io
    

    浏览器兼容性

    截至2016年6月,WebSocket适用于除Opera Mini以外的所有内容,包括IE高于9的IE。

    这是我可以在2016年6月使用的WebSocket的浏览器兼容性:

    在这里输入图像描述

    请参阅http://caniuse.com/websockets获取最新信息。


    我要提供一个反对使用socket.io的参数。

    我认为使用socket.io完全是因为它有回退不是一个好主意。 让IE8 RIP。

    在过去,很多情况下NodeJS的新版本已经破坏了socket.io。 你可以查看这些列表的例子... https://github.com/socketio/socket.io/issues?q=install+error

    如果你开发一个Android应用程序或需要与你现有的应用程序一起工作的东西,你可能会立即与WS一起工作,socket.io可能会给你一些麻烦......

    另外Node.JS的WS模块使用起来非常简单。

    链接地址: http://www.djcxy.com/p/31327.html

    上一篇: Differences between socket.io and websockets

    下一篇: WebSockets vs. Server