WebSocket 使用示例,后台为nodejs

效果图

页面代码

javascript 复制代码
<!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>

服务后台代码

javascript 复制代码
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 文本字节数。

事件:

  • open Socket.onopen 连接建立时触发
  • message Socket.onmessage 客户端接收服务端数据时触发
  • error Socket.onerror 通信发生错误时触发
  • close Socket.onclose 连接关闭时触发

方法:

  • Socket.send() 使用连接发送数据
  • Socket.close() 关闭连接
相关推荐
慧一居士21 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
THMOM912 小时前
TinyWebserver学习(9)-HTTP
网络协议·学习·http