WebSocket 使用示例，后台为nodejs

#老程

于 2024-03-21 16:43:46 发布

阅读量398

点赞数 4

分类专栏：前端 NodeJs 文章标签： websocket 网络协议前端

老程出品

本文链接：https://blog.csdn.net/LuckKing0925/article/details/136913057

版权

前端同时被 2 个专栏收录

27 篇文章 2 订阅

订阅专栏

NodeJs

4 篇文章 0 订阅

订阅专栏

本文展示了如何在前端使用WebSocketClient与后端服务器进行实时双向通信，包括HTML页面的连接初始化、消息监听和错误处理，以及服务端的WebSocket服务器设置和数据发送。

摘要由CSDN通过智能技术生成

效果图

在这里插入图片描述

页面代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>WebSocket Client</title>
  </head>
  <body>
    <script>
      const ws = new WebSocket('ws://localhost:8765')
      ws.onopen = () => {
        console.log('HTML: init!')
        ws.send(`HTML say -> I'm init!`)
      }
      ws.onmessage = event => {
        console.log('HTML listen: ', event.data)
      }
      ws.onerror = error => {
        console.error('HTML Error: ', error)
      }
      ws.onclose = event => {
        if (event.wasClean) {
          console.log(
            'HTML Closed cleanly, code:',
            event.code,
            'reason:',
            event.reason
          )
        } else {
          console.error('HTML Connection died')
        }
      }
    </script>
  </body>
</html>

服务后台代码

const WebSocket = require('ws')

const wss = new WebSocket.Server({ port: 8765 })

wss.on('connection', ws => {
  console.log('SERVER: init!')
  ws.on('message', message => {
    console.log('SERVER listen: %s', message)
    setInterval(() => {
      function getTwoNum(num) {
        return (+num < 10 ? '0' : '') + num
      }
      const now = new Date()
      const nowStr = `${now.getFullYear()}-${getTwoNum(
        now.getMonth() + 1
      )}-${getTwoNum(now.getDate())} ${getTwoNum(now.getHours())}:${getTwoNum(
        now.getMinutes()
      )}:${getTwoNum(now.getSeconds())}`

      ws.send(`SERVER say -> ${nowStr}`)
    }, 3000)
  })
})

new WebSocket（） api说明

var Socket = new WebSocket(url, [protocol] );
参数：

url, 指定连接的 URL
protocol 是可选的，指定了可接受的子协议

属性：

Socket.readyState 只读属性 readyState 表示连接状态(0-表示连接尚未建立; 1-表示连接已建立，可以进行通信; 2-表示连接正在进行关闭; 3-表示连接已经关闭或者连接不能打开)
Socket.bufferedAmount 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。

事件：