Vue.js 如何使用 Socket.IO?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.js 如何使用 Socket.IO?相关的知识,希望对你有一定的参考价值。

参考技术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

【讨论】:

以上是关于Vue.js 如何使用 Socket.IO?的主要内容,如果未能解决你的问题,请参考以下文章

如何使socket.io只连接一次

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

尝试在 Laravel 的 vue.js 组件中导入 socket.io 时出现问题

如何使 socket.io 在 pm2 集群模式下正常工作?

css socket.io聊天示例来自vue.js http://socket.io/get-started/chat/

css socket.io聊天示例来自vue.js http://socket.io/get-started/chat/