这是一个简单的以websocket和vue为基础的聊天室demo:
- 首先安装vue-cli并创建一个新的项目:
npm install -g vue-cli
vue init webpack my-project
- 在
App.vue
中,添加一个文本框和按钮用于发送消息。并在data
中初始化一个空消息数组和WebSocket
对象:
<template>
<div>
<h1>Chat Room</h1>
<div v-for="msg in messages" :key="msg">{{msg}}</div>
<input type="text" v-model="message"><button @click="sendMessage">Send</button>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
message: "",
messages: [],
ws: null
};
},
methods: {
sendMessage() {
if (this.message) {
this.ws.send(this.message);
this.message = "";
}
}
},
mounted() {
this.ws = new WebSocket("ws://localhost:8080");
this.ws.onmessage = event => {
this.messages.push(event.data);
};
}
};
</script>
- 在后端使用Node.js的
ws
库创建WebSocket服务器:
const WebSocket = require("ws");
const wss = new WebSocket.Server({ port: 8080 });
wss.on("connection", ws => {
ws.on("message", message => {
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
});
- 运行前端和后端服务器:
npm run dev
node server.js
- 打开浏览器,访问
http://localhost:8080/
,输入用户名并进入聊天室。可以看到在不同浏览器窗口输入的消息都能实现互通。
这只是一个简单的demo,可以根据需求进行扩展和美化。