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?的主要内容,如果未能解决你的问题,请参考以下文章
带有 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/