1. 服务端
1.新建一个server.js文件
2.初始化一个node项目
npm init -y
3.使用npm安装ws库
npm install ws
4.使用nodejs
const WebSocket = require("ws");
// 创建一个 WebSocket 服务器，监听端口 3000
const wss = new WebSocket.Server({ port: 3000 });
// 监听连接事件
wss.on("connection", function connection(ws) {
console.log("客户端已连接");
// 监听客户端发送的消息
ws.on("message", function incoming(message) {
console.log("收到消息", message.toString());
// 原样将消息发送回客户端
ws.send("服务端返回" + message.toString());
});
//模仿服务端流式数据持续推送
setInterval(() => {
let date = new Date();
ws.send("主动推送的消息" + date);
}, 1000);
// 监听连接关闭事件
ws.on("close", function () {
console.log("客户端断开连接");
});
});
5.在终端中运行命令启动ws服务
node server.js
- 看到以下输出,证明服务已经启动
WebSocket server is running on ws://localhost:3000
2.客户端
使用html写一个页面或者用vue写一个页面连接ws
<template>
<div id="app">
<h1>WebSocket Demo</h1>
<input type="text" v-model="message" placeholder="发送消息" />
<button @click="sendMessage">发送</button>
<button @click="disconnectWebSocket">关闭连接</button>
<button @click="connectWebSocket">连接</button>
<button @click="clear">清空</button>
<ul style="height: 400px;overflow: auto;width: 600px;" >
<li v-for="(msg,index) in messages" :key="index"> {{messages.length - index}} {{ msg }}</li>
</ul>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
socket: null,
message: '',
messages: []
}
},
mounted() {
this.connectWebSocket()
},
beforeUnmount() {
this.disconnectWebSocket()
},
methods: {
clear(){
this.messages = []
},
connectWebSocket() {
this.socket = new WebSocket('ws://localhost:3000')
this.socket.addEventListener('open', () => {
console.log('服务端已连接')
})
this.socket.addEventListener('message', (event) => {
console.log('收到信息', event.data)
this.displayMessage(event.data)
})
this.socket.addEventListener('error', (event) => {
console.error('WebSocket 连接出错:', event)
// this.reconnectWebSocket()
})
this.socket.addEventListener('close', () => {
console.log('WebSocket 连接已关闭')
// this.reconnectWebSocket()
})
},
disconnectWebSocket() {
if (this.socket) {
this.socket.close()
this.socket = null
}
},
reconnectWebSocket() {
setTimeout(() => {
this.connectWebSocket()
}, 5000) // 5 秒后重新连接
},
displayMessage(message) {
this.messages.unshift(message)
},
sendMessage() {
if (this.socket && this.socket.readyState === WebSocket.OPEN) {
this.socket.send(this.message)
this.message = ''
} else {
console.error('WebSocket 连接未建立或已关闭')
}
}
}
}
</script>
