如何在 Vue 项目中使用 Websockets

Question

WebSockets 当您想要显示数据的实时变化时， 是一个很好的工具。 例如服务器可以将股票市场价格变化推送给客户端，而不是客户端需要通过 HTTP 请求来请求更改。

话虽如此，下面您将找到一个简单的 Vue 应用程序示例，它向用户显示当前时间以及用户可以在何处向 websocket 发送简单消息。

  const app = new Vue({
    data: () => ({ time: null }),
    template: `
      <div>
        <h2>{{time}}</h2>
      </div>
    `,
    mounted: function(){
      let connection = new WebSocket('ws://localhost:3000/');
      connection.onmessage = (event) => {
        // Vue data binding means you don't need any extra work to
        // update your UI. Just set the `time` and Vue will automatically
        // update the `<h2>`.
        this.time = event.data;
      }
    }
  });
  app.$mount("#content");

下面是一个示例 websocket 服务器，您可以将其与上述 Vue 代码一起使用。

"use strict";

const serverPort = 3000;
const express = require("express");
const http = require("http");
const WebSocket = require("ws");

const app = express();
const server = http.createServer(app);
const websocketServer = new WebSocket.Server({ server });

//when a websocket connection is established
websocketServer.on("connection", (webSocketClient) => {
  // send feedback to the incoming connection
  webSocketClient.send("The time is: ");
  setInterval(() => {
    let time = new Date();
    webSocketClient.send("The time is: " + time.toTimeString());
  }, 1000);
});

//start the web server
server.listen(3000, () => {
  console.log("Websocket server started on port 3000");
});