WebSocket的简单应用示例_websocket简单例子

日常使用http(s)协议是单向请求，在有些场景需要客户端与服务端的双向通信，此时就需要WebSocket(s)协议

服务端

在node中可以依赖ws模块帮我们建立ws的服务端

// server.js

const WebSocket = require('ws')
// 实例化ws
const wss = new WebSocket.Server({ port: 8080 })

// WebSocket请求接入
wss.on('connection', ws => {
  ws.on('message', message => {
    console.log(`Received message => ${message}`)
  })
  ws.send('Hello! Message From Server!!')
  // 向客户端主动发送数据
  let i = 0;
  setInterval(() => {
    ws.send(`this is count from server: ${i}`);
    i++;
  }, 1000)
// 服务端主动断开连接
  setTimeout(() => {
    ws.close()
  }, 1000 * 20)
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

客户端

// client.js
const WebSocket = require('ws')
const url = 'ws://localhost:8080'
const connection = new WebSocket(url)
// 与服务端建立连接之后的回调
connection.onopen = () => {
  // 成功建立连接之后，发送消息给服务端
  connection.send('Hello Server, This is Message From Client');
  setInterval(() => {
    // 心跳检测
    connection.ping();
  }, 5 * 1000)
}

// server端连接关闭后的回调函数
connection.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
  console.log(`检测到ws连接已断开${code};${reason};${wasClean}; server closed`);
};

// 错时的回调函数
connection.onerror = (error) => {
  console.log(`WebSocket error: ${error}`)
}

// 收到服务器数据后的回调函数
connection.onmessage = (e) => {
  console.log('客户端接受来自服务端的消息推送:', e.data);
}

// 客户端主动断开ws连接
// setInterval(() => {
//   connection.close()
// }, 1000 * 10)

// 向服务器发送数据
let i = 0;
setInterval(() => {
  connection.send(`this is count from client: ${i}`);
  i++;
}, 2000)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

这里是使用node启动了两个服务，一个作为ws的服务端，一个作为ws的客户端。分别启动两个nodejs 的脚本，
效果如下：

这就简单实现了ws的应用，使用起来非常方便