webSocket 学习

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

引子

WebSocket 是一种在单个 TCP 连接上进行全双工通信的网络协议。它是 HTML5 中的一种新特性能够实现 Web 应用程序和服务器之间的实时通信比如在线聊天、游戏、数据可视化等。

相较于 HTTP 协议的请求-响应模式使用 WebSocket 可以建立持久连接允许服务器主动向客户端推送数据避免了不必要的轮询请求提高了实时性和效率。同时WebSocket 的连接过程也比较简单可以通过 JavaScript 中的 WebSocket API 进行创建和管理并且可以和现有的 Web 技术如 HTML、CSS 和 JavaScript 无缝集成。

WebSocket 协议是基于握手协议Handshake Protocol的它在建立连接时使用 HTTP/HTTPS 发送一个初始握手请求然后服务器响应该请求建立连接后就可以在连接上进行数据传输了。

总之WebSocket 提供了一种快速、可靠且灵活的方式使 Web 应用程序能够实现实时通信同时也提高了网络性能和用户体验。

场景

实时性要求较高的应用比如在线聊天、游戏、数据可视化等
需要频繁交换数据的应用比如在线编辑器、文件管理器等
需要推送服务的应用比如实时数据监控、通知系统等
跨平台的应用比如桌面应用程序、移动应用程序等。

demo 简易聊天后端nodejs

ndoejs

import ws from 'ws'

const wss = new ws.Server({ port: 8080 })
const state = {
    HEART:1, 
    MESSAGE:2
}
wss.on('connection', (ws) => {
    console.log('连接 nodejs 服务器成功')
    ws.on('message', (message) => {
        console.log('接收到客户端发来的消息: ' + message)
        wss.clients.forEach((client) => {
            client.send(JSON.stringify({state:state.MESSAGE,message:"我是nodejs服务器我收到你的消息了" + message}))
        })
    })
    let hraetInreval = null;
    //心跳包
    const sendHeart = () => {
        if(ws.readyState === ws.OPEN){
            ws.send(JSON.stringify({state:state.HEART,message:"心跳"}));
        }else{
            clearInterval(hraetInreval);
        }
    }
    hraetInreval = setInterval(sendHeart, 5000);
})

首先通过 new ws.Server({ port: 8080 }) 创建了一个 WebSocket 服务器监听在本机的 8080 端口
在 wss.on('connection', (ws) => {...}) 的回调函数中当有新的客户端连接时会执行一些初始化操作

输出日志console.log(‘连接 nodejs 服务器成功’)
监听客户端发送的消息并在控制台输出接收到的内容ws.on(‘message’, (message) => {…})
开启一个定时器每 5 秒向该客户端发送一条心跳消息setInterval(sendHeart, 5000);

客户端发送消息后服务器会将消息广播给所有连接的客户端wss.clients.forEach((client) => {…})
state 是一个自定义的对象包含了 HEART 和 MESSAGE 两个常量用于标识消息的类型

前端代码

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>

   </style>
</head>

<body>

   <div>
      <ul id="list">

      </ul>
      <input type="text" id="input">
      <button id="send">发送</button>
      <button id="stop">断开</button>
   </div>

   <script>
      //webSocket
      const list = document.querySelector('#list');
      const ws = new WebSocket('ws://localhost:8080');

      ws.addEventListener('open', () => {
         console.log('连接');
      });

      ws.addEventListener('message', (e) => {
         let data = JSON.parse(e.data)
         const li = document.createElement('li');
         if (data.state == 2) {
            li.innerText = data.message;
            list.appendChild(li);
         }
        
      });

      const btn = document.querySelector('#send');
      const input = document.querySelector('#input');
      const stop = document.querySelector('#stop');
      btn.addEventListener('click', () => {
         if (input.value) {
            ws.send(input.value)
            input.value = ''
         }
      })
      stop.addEventListener('click', () => {
         ws.close()
      })

   </script>
</body>

</html>