webscoket服务器

Question

如何在vue3中，搭建一个 websocket 的服务，达到发送消息的作用。

Answer 1

下面是一个使用 Node.js 搭建 WebSocket 服务器的例子：

首先，安装 ws 库：

npm install ws

然后，创建一个 server.js 文件，内容如下：

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('received: %s', message);
});

ws.send('something');
});

最后，启动服务器：

node server.js

然后，在浏览器中打开 http://localhost:8080/%EF%BC%8C%E5%8D%B3%E5%8F%AF%E8%BF%9E%E6%8E%A5%E5%88%B0 WebSocket 服务器。

在 Vue 3 中使用 WebSocket 的方法与在浏览器中使用类似，具体可以参考以下代码：

import { createApp } from 'vue';

const app = createApp({
data() {
return {
ws: null,
};
},
mounted() {
this.ws = new WebSocket('ws://localhost:8080');
this.ws.addEventListener('message', (event) => {
console.log(event.data);
});
},methods: {
sendMessage(message) {
this.ws.send(message);
},
},
});

app.mount('#app');