Websocket起步

1. 简介

现在很多网站为了实现推送技术, 所用的技术都是Ajax轮询, 轮询是在特定的时机由浏览器对服务器发出HTTP请求, 然后由服务器返回最新的数据给浏览器, 这种传统的模式带来很明显的缺点, 即浏览器需要不断的向服务器发出请求, 然而HTTP请求可能包含较长的头部, 其中真正有效的数据可能只是很小一部分. 显然这样会浪费带宽等资源

所以单向请求的缺点:

• 无法监听连续状态的变化(HTTP无状态)
• 效率低浪费资源

H5定义的Websocket协议, 能更好的节省服务器资源和带宽, 并且能够更实时地进行通讯.
Websocket的常见应用:
聊天室

• 消息系统: 推送消息, 实况, 股票基金等实时变化的数据
• 点赞
• 直播评论(弹幕)
• 游戏
• 协同编辑
• 基于位置的应用
• 在线教育(多媒体聊天, 文字消息)

2. 基本概念

websocket协议在2008年诞生, 2011年成为国际标准 所有浏览器都支持
最大的特点: 服务器可以主动向客户端推送消息, 客户端也可以主动向服务器发送消息, 是真正的双向平等对话, 属于服务器推送技术的一种, (还有长轮询, sse等等其他推送技术)

3. websocket服务端搭建

常用的Node实现有以下几种:

• ws
• Socket.io (优雅降级, 解决兼容, 把通信转换成普通http请求)
• Websocket-Node

1. ws配置服务端与客户端

   配置客户端
   npm install -S ws
   使用WebSocket.Server方法, 快速初始化服务端:

const Websocket = require('ws');

const wss = new Websocket.Server({ port: 8000 })

wss.on('connection', function(ws) {
  ws.on('message', function(msg) {
      console.log(msg)
  })
  ws.send('Message from server')
})

      ws配置客户端

const Websocket = require('ws');
const wss = new Websocket('ws://127.0.0.1:8000')

wss.on('open', function() {
    for(var i = 0; i < 3; i++) {
        wss.send('hi' + i)
    }
    wss.on('message' ,function(msg) {
        console.log(msg)
    })
})

---

2. socket.io配置服务端与客户端
   socket.io是基于websocket的client-server实时通信库
   socket.io底层是基于engine.io这个库. engine.io是为socket.io提供跨浏览器/跨设备的双向通信的底层库 engine.io使用了websocket和XHR方式封装了一套socket.io协议. 在低版本的浏览器中, 不支持websocket,为了兼容使用长轮询(polling)替代