首先,我们需要在Node.js中创建一个简单的WebSocket服务器。使用ws
模块可以轻松实现。
Node.js 端代码 (server.js
):
const WebSocket = require('ws');
// 初始化WebSocket服务器
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
// 将接收到的消息广播到所有连接的客户端
wss.clients.forEach(function each(client) {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
然后,在Vue应用中,我们将创建一个组件来连接到这个WebSocket接口并发送接收消息。
Vue 端代码 (App.vue
):
<template>
<div>
<input v-model="message" @keyup.enter="sendMessage" placeholder="Enter message" />
<button @click="sendMessage">Send</button>
<div v-for="msg in messages" :key="msg">{{ msg }}</div>
</div>
</template>
<script>
export default {
data() {
return {
ws: null,
message: '',
messages: []
};
},
created() {
this.connect();
},
methods: {
connect() {
this.ws = new WebSocket('ws://localhost:8080');
this.ws.onopen = () => console.log('WebSocket connected');
this.ws.onerror = (error) => console.log('WebSocket error:', error);
this.ws.onmessage = (message) => {
this.messages.push(message.data);
};
this.ws.onclose = () => console.log('WebSocket disconnected');
},
sendMessage() {
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
this.ws.send(this.message);
this.message = '';
}
}
},
beforeDestroy() {
if (this.ws) {
this.ws.close();
}
}
};
</script>
确保您已经安装了ws
模块,可以使用npm安装:
npm install ws
这个例子展示了如何在Node.js后端使用ws
模块创建一个WebSocket服务器,并在Vue前端使用WebSocket API与该服务器进行通信。当用户在Vue应用中输入消息并发送时,该消息将广播到所有连接的客户端,包括发送者。