使用websocket+vue写一个小demo

这是一个简单的以websocket和vue为基础的聊天室demo：

1. 首先安装vue-cli并创建一个新的项目：

npm install -g vue-cli
vue init webpack my-project

1. 在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>

1. 在后端使用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);
      }
    });
  });
});

1. 运行前端和后端服务器：

npm run dev
node server.js

1. 打开浏览器，访问http://localhost:8080/，输入用户名并进入聊天室。可以看到在不同浏览器窗口输入的消息都能实现互通。

这只是一个简单的demo，可以根据需求进行扩展和美化。