1. 简介
现在很多网站为了实现推送技术, 所用的技术都是Ajax轮询, 轮询是在特定的时机由浏览器对服务器发出HTTP请求, 然后由服务器返回最新的数据给浏览器, 这种传统的模式带来很明显的缺点, 即浏览器需要不断的向服务器发出请求, 然而HTTP请求可能包含较长的头部, 其中真正有效的数据可能只是很小一部分. 显然这样会浪费带宽等资源
所以单向请求的缺点:
- 无法监听连续状态的变化(HTTP无状态)
- 效率低浪费资源
H5定义的Websocket协议, 能更好的节省服务器资源和带宽, 并且能够更实时地进行通讯.
Websocket的常见应用:
聊天室
- 消息系统: 推送消息, 实况, 股票基金等实时变化的数据
- 点赞
- 直播评论(弹幕)
- 游戏
- 协同编辑
- 基于位置的应用
- 在线教育(多媒体聊天, 文字消息)
2. 基本概念
websocket协议在2008年诞生, 2011年成为国际标准 所有浏览器都支持
最大的特点: 服务器可以主动向客户端推送消息, 客户端也可以主动向服务器发送消息, 是真正的双向平等对话, 属于服务器推送技术的一种, (还有长轮询, sse等等其他推送技术)
3. websocket服务端搭建
常用的Node实现有以下几种:
- ws
- Socket.io (优雅降级, 解决兼容, 把通信转换成普通http请求)
- Websocket-Node
-
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)
})
})
- socket.io配置服务端与客户端
socket.io是基于websocket的client-server实时通信库
socket.io底层是基于engine.io这个库. engine.io是为socket.io提供跨浏览器/跨设备的双向通信的底层库 engine.io使用了websocket和XHR方式封装了一套socket.io协议. 在低版本的浏览器中, 不支持websocket,为了兼容使用长轮询(polling)替代