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())
})
})
})