Node.js WebSocket 协议

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

<!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>
Node.js 教程 Node.js 安装 Node.js NPM Node.js 模块 Node.js HTTP Node.js 文件操作 Node.js Buffer Node.js Stream Node.js Crypto Node.js Mysql Node.js Request Node.js WebSocket