websocket 是 HTML5 标准的一个新的 网络协议。它是基于 HTTP 协议之上的扩展，是一种可以双向通信的协议。
传统的 HTTP 协议 通信，服务端是不能主动发信息给客户端的。它必须是客户端一个请求，服务器一个响应，一来一回。那么基于这种通信的方式，如果想构建一个网络在线聊天应用，就没有办法，因为不能主动推送信息，要客户端一直刷新。
websocket 可以跟 HTTP 协议共用一个端口，它协议的前缀是 ws://，如果是 HTTPS，那么就是 wss://，webSocket 没有同源限制，客户端可以发送任意请求到服务端，只要目标服务器允许。
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。
<!DOCTYPE html>
<html>
<head>
<title>websocket</title>
</head>
<body>
<script type="text/javascript">
// 浏览器提供 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()
}
}
</script>
</body>
</html>