我们都知道,http协议通信只能由客户端发起,然后服务端再做出响应;但是websocket协议最大的特点是服务端可以主动向客户端推送消息,客户端也可以主动向服务器发送消息
往常实现双向通信的方法主要是轮询,客户端通过定时器,每隔一段时间就会主动发送请求给服务器,这无疑是会耗很多的流量和给服务端造成资源消耗;而websokcet实时性更强,当服务器和客户端之间交换数据时更少的控制开销。
下载websocket依赖 websocket - npm
npm i websocket
在文件下下创建server.js 文件,跟着npm文档的例子引入使用即可
/* server.js 服务器 */
// 引入
const WebSocketServer = require('websocket').server
const http = require('http')
const port = 8000
let time = 0
// 创建服务器
const server = http.createServer((request, response) => {
console.log(`${new Date().toLocaleDateString()} Received request for ${request.url}`)
response.writeHead(404)
response.end()
})
server.listen(port, () => {
console.log(`${new Date().toLocaleDateString()} Server is listening on port ${port}`)
})
// websocket 服务器
const wsServer = new WebSocketServer({
httpServer: server
})
// 建立连接
wsServer.on('request', (request) => {
// 当前的连接
console.log(request.origin, '=======request.origin=======')
const connection = request.accept(null, request.origin)
console.log(`${new Date().toLocaleDateString()} 已经建立连接`)
setInterval(() => {
const obj = {
title: '标题' + time++,
value: '内容' + time++
}
connection.send(JSON.stringify(obj))
}, 2000)
// 监听客户端发来的的消息
connection.on('message', (message) => {
console.log('message========>', message)
if (message.type === 'utf8') {
console.log('Received Message: ' + message.utf8Data);
// connection.sendUTF(message.utf8Data);
} else if (message.type === 'binary') {
// binary 二进制
console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
// connection.sendBytes(message.binaryData);
}
});
// 监听当前连接 当断开链接(网页关闭) 触发
connection.on('close', (reasonCdoe, description) => {
console.log(`${new Date().toLocaleDateString()} ${connection.remoteAddress} 断开链接`)
})
})
在文件下下新建index.html文件,更多的api介绍可看文档 WebSocket - Web API 接口参考 | MDN
// index.html
在服务器重启或是弱网情况下,前端不能保证一直连接成功。因此在出现被动断开的情况下,需要有心跳机制和断线重连的功能。
后续单独详说这部分。
目前来说,我在工作中用到websocket的主要场景是:需要实时轮播通告用户订阅的消息,实时的图表数据展示。
当然还有应用最广泛的是使用websocekt实现聊天室功能,这个还没玩过,有时间可以试试。