WebSocket的简单应用示例

本文通过一个简单的示例介绍了如何使用Node.js搭建WebSocket服务端与客户端,实现双向通信,并展示了心跳检测及主动断开连接等特性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

日常使用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)
})

客户端

// 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)

这里是使用node启动了两个服务,一个作为ws的服务端,一个作为ws的客户端。分别启动两个nodejs 的脚本,
效果如下:
在这里插入图片描述
这就简单实现了ws的应用,使用起来非常方便

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

问白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值