websocket简易示例（vue3+express）实现一台电脑控制另一台电脑的页面

比眉伴天荒 2024-04-08 10:50 79阅读 0赞

需求如题：一台电脑控制另一台电脑的页面，通过websocket实现

### 前端vue ###

##### 控制页面 #####

<template>
      <div>
        <button @click="send('/')">去往第一页</button>
        <button @click="send('/two')">去往第二页</button>
        <button @click="send('/three')">去往第三页</button>
      </div>
    </template>
    
    <script setup>
    import {
           onMounted } from "vue"
    let socket = null
    // 向服务器发送消息
    const send = (msg) => {
          
      socket.send(msg);
    }
    onMounted(() => {
          
      socket = new WebSocket("ws://192.168.4.237:3000/basic");
      // 当前浏览器不支持
      if (!socket) return console.log("Sorry! Your browser doesn't support WebSocket");
      // 当前浏览器支持,打印连接信息
      if (socket) console.log(socket);
      // 接收服务器的消息通知
      socket.onmessage = ({
            data: msg }) => {
          
        console.log("发送消息成功，服务器进行广播", msg);
      };
    })
    </script>

##### 显示页面 #####

### 后端express ###

const express = require("express")
    // websocket库
    const expressWs = require("express-ws")
    const app = express()
    expressWs(app)
    
    // 存放所有连接的用户
    let connections = []
    // 当前路由
    let current = ""
    // websocket请求地址
    app.ws("/basic", conn => {
        
      // 存储所有连接即用户
      connections.push(conn)
      // 每次增加新用户，进行广播，从而同步所有用户路由
      if (current) {
        
        broadcast(current)
      }
      //接收用户发来的数据
      conn.on("message", function (msg) {
        
        console.log("有个客户端发送请求了")
        broadcast(msg)
        current = msg
      })
    
      //监听关闭状态
      conn.on("close", function () {
        
        console.log("洗洗睡了洗洗睡了")
      })
    })
    
    /**
     * 广播 - 群发消息给所有用户
     * @param {*} msg 管理页面发来的路由消息
     */
    function broadcast(msg) {
        
      connections.forEach(item => {
        
        item.send(msg)
      })
    }
    
    const port = 3000
    app.listen(port, () => {
        
      console.log(`express server listen at http://192.168.4.237:${port}`)
    })