Echarts+vue电商平台数据可视化——webSocket改造项目

websocket的基本使用，用于测试前端能否正常获取到后台数据

后台代码编写：

const path = require("path");
const fileUtils = require("../utils/file_utils");
const WebSocket = require("ws");
// 创建WebSocket服务端的对象，绑定的端口号是9998
const wss = new WebSocket.Server({
  port: 9998,
});
// 服务端开启了监听
// 导出一个函数listen
module.exports.listen = () => {
  // 对客户端的连接事件进行监听
  // client: 代表的是客户端的连接socket对象
  wss.on("connection", (client) => {
    console.log("有客户端连接成功了...");
    // 对客户端的连接对象进行message事件的监听
    // msg：由客户端发给服务器的数据
    client.on("message", async (msg) => {
      console.log("客户端发送数据给服务器：" + msg);
      let payload = JSON.parse(msg);
      const action = payload.action;
      if (action === "getData") {
        let filePath = "../data/" + payload.chartName + ".json";
        // payload.charName; // trend seller map rank hot stock
        filePath = path.join(__dirname, filePath);
        const ret = await fileUtils.getFileJsonData(filePath);
        // 需要再服务器获取到数据的基础上，增加一个data的字段
        // data对应的值，就是某个json文件的内容
        payload.data = ret;
        client.send(JSON.stringify(payload));
      } else {
        // 原封不动的将所有收到的数据转发给每一个处于连接状态的客户端
        // wss.clients //所有客户端的连接
        wss.clients.forEach((client) => {
          client.send(JSON.stringify(payload));
        });
      }
      // 由服务端往客户端发送数据
      // client.send("hello socket from backend");
    });
  });
};

调用的获取文件路径的方法（getFileJsonData）：

// 读取文件的工具方法
const fs = require("fs");
module.exports.getFileJsonData = (filePath) => {
  // 根据文件的路径,读取文件的内容
  return new Promise((resolve, reject) => {
    fs.readFile(filePath, "utf-8", (error, data) => {
      if (error) {
        // 读取文件失败
        reject(error);
      } else {
        // 读取文件成功
        // return data; // 这里的return返回的是这个函数的调用者,而不是getFileJsonData这个函数的调用者
        // 读取文件是一个异步任务,对于一个异步任务,我们也不能通过return的方式来将数据返回给调用者
        resolve(data);
      }
    });
  });
};

前端使用：

    <button id="connect">连接</button>
    <button id="send" disabled="true">发送数据</button>
    <br />从服务端接收的数据如下： <br />
    <span id="recv"></span>
    <script>
      var connect = document.querySelector("#connect");
      var send = document.querySelector("#send");
      var recv = document.querySelector("#recv");
      let ws = null;
      connect.onclick = function () {
        ws = new WebSocket("ws://localhost:9998");
        ws.onopen = () => {
          console.log("连接服务端成功了...");
          send.disabled = false;
        };
        ws.onclose = () => {
          console.log("连接服务器失败或关闭");
          send.disabled = true;
        };