websocket 是服务器推送技术的一种,最大的特点是服务器可以主动向客户端推送消息,客户端也可以主动向服务器发送消息。
特点:
- 建立在 TCP 协议之上,服务器端的实现比较容易。
- 与 HTTP 协议有着良好的兼容性。默认端口也是80和443,并且握手阶段采用 HTTP 协议,因此握手时不容易屏蔽,能通过各种 HTTP 代理服务器。
- 数据格式比较轻量,性能开销小,通信高效。
- 可以发送文本,也可以发送二进制数据。
- 没有同源限制,客户端可以与任意服务器通信。
- 协议标识符是ws(如果加密,则为wss),服务器网址就是 URL。
客户端API
- websocket构造函数 – 用于新建实例
// 执行下面的语句,客户端便会与服务端进行连接
var ws = new WebSocket('ws://localhost:8080');
- webSocket.readyState – 实例对象的当前状态(4种)
CONNECTING:值为0,表示正在连接。
OPEN:值为1,表示连接成功,可以通信了。
CLOSING:值为2,表示连接正在关闭。
CLOSED:值为3,表示连接已经关闭,或者打开连接失败。
- webSocket.onopen – 连接成功后的回调函数
ws.onopen = function () {
ws.send('Hello World!');
}
- webSocket.onmessage – 收到服务端数据的回调函数
ws.onmessage = function(event) {
var data = event.data;
// 处理数据
// 服务端数据可能为文本,二进制数据
};
- webSocket.onclose – 关闭连接的回调函数
ws.onclose = function (event) {
var code = event.code;
var reason = event.reason;
var wasClean = event.wasClean;
// 。。。
}
- webSocket.send() – 向服务端发送数据
ws.send('send message');
- webSocket.onerror – 报错时的回调函数
socket.onerror = function(event) {
// 。。。
};
服务器端实现
常用的 Node 实现有以下三种。
- µWebSockets
- Socket.IO(https://socket.io/docs/)
- WebSocket-Node
websocket的兼容性
websocket部分详见阮一峰websocket教程, 下面介绍一个socket.io的简单用法 :
socket.io 是基于websocket封装的js库
客户端:
npm install socket.io-client
import io from 'socket.io-client'
// 或者 <script src="/socket.io/socket.io.js"></script>
const socket = io('http://localhost');
socket.on('open', ()=>{
// ....
})
socket.on('connect', (msg) => {
//console.log(msg)
})
socket.emit('new_msg', (msg) =>{
// 与服务端统一函数名称, 实时获取服务端推送的数据
})
服务端:
此处贴出官网简单例子 ,详看官网实例 以及 文档