WebSocket

安装

bash
12
npm i ws//安装WebSocket
npm i @types/ws -D//安装声明文件

前后端互发消息(后端)

js
12345678910111213
import { WebSocketServer } from 'ws'
// 创建一个WebSocket服务器 端口8080
const wss = new WebSocketServer({port: 8080},() => {
    console.log('服务器启动成功!')
})
// 监听客户端连接事件
wss.on('connection', (socket) => {
    console.log('客户端连接成功')
    socket.on('message', (message) => {
        console.log('收到客户端消息:', message.toString())
        socket.send(message.toString())
    })
})

前后端互发消息(前端)

js
1234567891011121314151617
import { ref } from 'vue'
const msg = ref('hello')
const list = ref(null)
const send = () => {
  //发送信息
  if(msg.value)ws.send(msg.value)
}
// 引入WebSocket
const ws = new WebSocket('ws://localhost:8080')
// 连接成功
ws.onopen = () => {
    console.log('连接成功')
}
// 接收到消息
ws.onmessage = (msg) => {
  console.log(msg.data);
}

群发消息(后端,前端不需要修改)

js
12345678910111213141516
import { WebSocketServer } from 'ws'
// 创建一个WebSocket服务器 端口8080
const wss = new WebSocketServer({port: 8080},() => {
    console.log('服务器启动成功!')
})
// 监听客户端连接事件
wss.on('connection', (socket) => {
    console.log('客户端连接成功')
    socket.on('message', (message) => {
        console.log('收到客户端消息:', message.toString())
        //群发
        wss.clients.forEach((client) => {
            client.send(message.toString())
        })
    })
})