WebSocket
websocket 是 HTML5 标准的一个新的 网络协议。它是基于 HTTP 协议之上的扩展,是一种可以双向通信的协议。
传统的 HTTP 协议 通信,服务端是不能主动发信息给客户端的。它必须是客户端一个请求,服务器一个响应,一来一回。那么基于这种通信的方式,如果想构建一个网络在线聊天应用,就没有办法,因为不能主动推送信息,要客户端一直刷新。
websocket 可以跟 HTTP 协议共用一个端口,它协议的前缀是 ws://,如果是 HTTPS,那么就是 wss://,webSocket 没有同源限制,客户端可以发送任意请求到服务端,只要目标服务器允许。
WS 模块
ws 是一个第三方的 websocket 通信模块,需要安装 npm i ws,websocket 的通信模型跟 HTTP 是一样的,服务端对应客户端模型。
server.js
const WebSocket = require('ws')
const WebSocketServer = WebSocket.Server;
// 创建 websocket 服务器 监听在 3000 端口
const wss = new WebSocketServer({port: 3000})
// 服务器被客户端连接
wss.on('connection', (ws) => {
// 通过 ws 对象,就可以获取到客户端发送过来的信息和主动推送信息给客户端
var i=0
var int = setInterval(function f() {
ws.send(i++) // 每隔 1 秒给连接方报一次数
}, 1000)
})
client.js
const WebSocket = require('ws')
const ws = new WebSocket('ws://localhost:3000')
// 接受
ws.on('message', (message) => {
console.log(message)
// 当数字达到 10 时,断开连接
if (message == 10) {
ws.send('close');
ws.close()
}
})
功能扩充
我们做一点稍微的改变,让双方一来一回通信,加深一下理解。
server.js
const WebSocket = require('ws')
const WebSocketServer = WebSocket.Server
// 创建 websocket 服务器 监听在 3000 端口
const wss = new WebSocketServer({port: 3000})
// 服务器被客户端连接
wss.on('connection', (ws) => {
// 接收客户端信息并把信息返回发送
ws.on('message', (message) => {
ws.send(message, (err) => { // send 方法的第二个参数是一个错误回调函数
if (err) {
console.log(`[SERVER] error: ${err}`);
}
})
})
})
client.js
const WebSocket = require('ws')
const ws = new WebSocket('ws://localhost:3000')
// 发送
ws.on('open', () => {
ws.send('Hello')
})
// 接受
ws.on('message', (message) => {
console.log(message) // Hello
})
浏览器
上面的 WebSocket 客户端,是基于 Node.js 构建的,通常 WS 的应用场景,更多时候面对的客户端是浏览器,我们下面来一个 JavaScript 版本的 client.js。
websocket// 浏览器提供 WebSocket 对象
var ws = new WebSocket('ws://localhost:3000')
// 发送
ws.onopen = function() {
ws.send('hello')
}
// 接收
ws.onmessage = function(mes) {
alert(mes.data)
if (mes.data === 'hello') {
ws.close()
}
}