Vue.js 如何使用 Socket.IO？

Posted 2023-05-08

参考技术A 在很多需求业务中，都需要浏览器和服务器实时通信来实现功能，比如：扫码登录(扫码后，手机确认登录，PC网页完成登录并跳转)、订单语言提醒等，这些都是建立在两端实时通信的基础上的。对前端而言，来实现浏览器和服务器实时通信，最好的选择就是Socket.IO库，能够快速的实现两端实时通信功能。

Socket.IO是一个WebSocket库，可以在浏览器和服务器之间实现实时，双向和基于事件的通信。它包括：Node.js服务器库、浏览器的javascript客户端库。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5

(1)、支持浏览器/Nodejs环境

(2)、支持双向通信

(3)、API简单易用

(4)、支持二进制传输

(5)、减少传输数据量

（1）客户端

main.js添加下列代码

发送消息和监听消息

（2）服务端

服务端，我们基于express搭建node服务器。

index.js文件

然后启动服务端服务

客户端即可查看效果。

带有 Websocket 或 Socket.io 的 Vue.js 实时图表

【中文标题】带有 Websocket 或 Socket.io 的 Vue.js 实时图表

【英文标题】：Vue.js Realtime Chart with Websocket or Socket.io

【发布时间】：2020-12-19 14:12:51

【问题描述】：

我在我的项目中使用 vue.js。我也为我的数据使用 websocket。每一秒都有数据。我需要在我的项目中使用实时图表。但我没有找到任何图表来解决我的问题。例如，我使用 apexchart，但当有新数据出现时，它没有刷新图表中的数据。

我的 websocket 数据如下：

   "topic": "2",
   "message": "data"

我的数据库数据如下：

  
    "id": "1",
    "deviceName": "refrigerator",
    "deviceType": "lineChart",
    "topic": "1",
    "message": "",
  ,
  
    "id": "8",
    "deviceName": "refrigerator",
    "deviceType": "lineChart",
    "topic": "1",
    "message": "",
  ,

我在这段代码中从数据库中获取我的数据。我检查了我的主题，是否相同。如果相同，我将 websocket 消息放入 json 数据以在屏幕上查看：

let bufferMessage = [];
   bufferMessage = jsonFromDatabase;
   socket.on("message", (topic, message) => 
       bufferMessage.forEach(element => 
       if (element.topic == topic) 
           element.message = message.toString();
       
    );
 );

我的代码是：

<div id="chart">
  <apexchart type="line"  :options="chartOptions" :series="$store.state.bufferMessage[index].message"></apexchart>
</div>

<script>
    import Vue from "vue";
    import ApexCharts from "apexcharts";
    import VueApexCharts from "vue-apexcharts";
    Vue.component("apexchart", VueApexCharts);
    
    export default 
      components: 
        apexchart: VueApexCharts,
      ,
      data() 
        return 
          series: [
            
              name: "Desktops",
              data: [],
            ,
          ],
          chartOptions: 
            chart: 
              height: 350,
              type: "line",
              zoom: 
                enabled: false,
              ,
            ,
            dataLabels: 
              enabled: false,
            ,
            stroke: 
              curve: "straight",
            ,
            title: 
              text: "Product Trends by Month",
              align: "left",
            ,
            grid: 
              row: 
                colors: ["#f3f3f3", "transparent"],
                opacity: 0.5,
              ,
            ,
            xaxis: 
              categories: [],
            ,
          ,
    
</script>

但是这段代码没有任何错误的方式。我只想将此图表转换为我的 websocket 数据的实时图表。

【问题讨论】：

请包含您尝试更新数据的代码部分

图表从series[0].data获取数据。但我的 websocket 数据来自我的 vuex 作为数组。我使用v-for 以html 代码获取我的数组。它无法实时运行。

您说您的图表从series[0].data 获取数据，但在上面的代码中我可以清楚地看到您的图表从$store.state.bufferMessage[index].message 获取数据。 - 所以请包括您尝试更新$store.state.bufferMessage[index].message的代码部分。

感谢更新。恐怕在这种状态下，我不清楚您的数据实际上是什么样子，您正试图在图表中显示。在上面的代码中，您尝试将数据设置为 series 数据只是一个字符串。字符串不是图表中series 数据的有效值。你需要一个值数组。

【参考方案1】：

除非OP显示更新数据的代码部分，否则我只能提供apexcharts官方文档的参考，关于更新数据：

import VueApexCharts from 'vue-apexcharts'

export default 
 name: 'Vue Chart',
 data: function () 
  return 
   chartOptions: 
    chart: 
      id: 'vuechart-example',
    ,
    xaxis: 
      categories: [1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998],
    ,
   ,
   series: [
    name: 'Vue Chart',
    data: [30, 40, 45, 50, 49, 60, 70, 81]
   ]
  
 ,
 methods: 
  updateChart() 
   const max = 90;
   const min = 20;
   const newData = this.series[0].data.map(() => 
     return Math.floor(Math.random() * (max - min + 1)) + min
   )
   // In the same way, update the series option
   this.series = [
    data: newData
   ]
  
 

正如你在上面的例子中看到的，通过改变props，我们触发了ApexCharts的更新事件。 (from the docs)

沙盒示例https://codesandbox.io/s/50z5wrmp6k