Websocket在Vue中的使用

最新推荐文章于 2024-08-27 10:52:38 发布

终是后来居上

最新推荐文章于 2024-08-27 10:52:38 发布

阅读量1.3k

点赞数

文章标签： websocket

原文链接：https://www.jianshu.com/p/ab47f613e8c6

版权

websocket 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1、初始化WebSocket对象

在这里插入图片描述
为了兼容各个浏览器所以初始化的时候针对不同的浏览器初始化调用不同的方法。

2、注册Websocket的url

在这里插入图片描述

其中CONFIG.WEBSOCKET_URL为wensocket服务地址，_this.userData.user是登录用户的用户名，这样做为了保证不同用户的websocket地址的唯一性，防止消息发生混淆。

3、增加心跳检测

由于网络以及websocket自身的一些不稳定性，页面长时间打开的情况下有时会发生websocket链接的断开，为了防止这种情况，我们增加心跳检测机制

在这里插入图片描述

并且在websocket链接建立时触发该方法

4、Vue组件中什么时候创建和销毁websocket对象

为了保证websocket对象能够及时创建，建议在vue的created的钩子函数中触发websocket的初始化，同时在beforeRouteLeave方法里关闭websocket的链接

在这里插入图片描述

5、完整代码参考

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

终是后来居上

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

SpringBoot+Vue 单页面多组WebSocket

chy的博客

03-19

2654

SpringBoot+Vue 单页面多组WebSocket

在Vue项目中使用WebSocket技术

青年码农

05-26

1719

WebSocket 协议自2008年诞生2011年成为国际标准以来。目前所有浏览器都已经支持了。因此我们不需要担心在项目中使用是否会有其他问题，WebSocket实现了浏览器与服务器全双工通信，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息。MDN上面有详细的文档，这里就不过多介绍，我们直接在vue项目上使用WebSocket，其实可以借助库实现，但是这个项目我们使用原生的，毕竟代码不多，也没必要在安装个依赖。WebSocket属性很多，用到了onopen、onerror、onmessag

参与评论您还未登录，请先登录后发表或查看评论

VUE使用websocket

最新发布

w_t_y_y的博客

08-27

1295

在之前搭建好的项目的基础上。

vue项目实现websocket

qq_37642495的博客

07-22

397

wsUrl: 'ws://1xxxxxxx:8099/imserver/9999', // ws地址 websock: null, // ws实例 // 初始化weosocket initWebSocket() { if (typeof WebSocket === 'undefined') return console.log('您的浏览器不支持websocket') this.websock = new W...

Vue WebSocket

lwx931449660的博客

08-17

2729

最近项目在使用websocket，自己研究了下，详细概念性的知识点可以看这里，vue使用websocket可以参考这篇文章，我这里分享下开发代码，系统理解下使用方法后面还有一篇文章，是关于websocket的案例的，看这里。 // 初始化websocket initWebSocket() { const vm = this // 创建一个websock...

vue websocket

HouYing

04-07

192

<template> </template> <script> export default { data() { return { websock: null } }, created() { this.initWebSocket() }, methods: { initWebSocket()...

vue中使用websocket

01-07

path: 'ws://192.168.2.27:8082//websocket?type=order' } }, created() { this.init() }, methods: { // websocket初始化 init() { if (typeof (WebSocket) === 'undefined') { this.$message({

websocket在springboot+vue中的使用教程

08-25

在本教程中，我们将详细介绍如何在Spring Boot和Vue中使用WebSocket。WebSocket是一种实时通信协议，允许服务器推送数据到客户端，而不需要客户端不断地请求服务器。下面，我们将通过实例代码，展示如何在Spring ...

websocket在vue中的使用

莉兹Liz的博客

02-16

1万+

一、websocket websocket是什么？为什么要用websocket？ websocket是一种网络通信呢协议，同http、https协议，是客户端与服务端通信用的，websocket创建在 TCP 上、通过HTTP/1.1 协议的101状态码进行握手。为什么要用websocket？试想以下场景：你妈妈在厨房做饭，你饿得不行，想马上吃到，但是妈妈不着急，她做完饭可能刷个锅洗个碗，你想在第一时间吃到饭，就得知道饭做好的消息，排油烟机声音太大得开门才能听到。用http连接：你（进厨房）：妈妈饭

Vue项目里Websocket的使用

热门推荐

qq_37635012的博客

10-08

2万+

由于项目需求有要使用长链接，我们普通的http请求如果用轮询的方式与服务端通讯就很消耗资源。我们一起来学习一下在vue项目里如何使用websocket,本文纯属个人观点，如果有不正确的地方请大家批评指正，技术无高低，谦虚学习的心态我认为很重要，天外有天人外有人。

Vue通过WebSocket建立长连接的实现代码

10-16

主要介绍了Vue通过WebSocket建立长连接的实现代码，文中给出了问题及解决方案,需要的朋友可以参考下

基于Python+Flask websocket 和 vue 的实时聊天项目-毕业设计源码+使用文档（高分优秀项目）

04-14

基于Python+Flask websocket 和 vue 的实时聊天项目-毕业设计源码+使用文档（高分优秀项目）该项目是个人高分毕业设计项目源码，已获导师指导认可通过，答辩评审分达到97分，在window10/11测试环境严格调试，下载即...

websokect的原理

weixin_33755557的博客

03-15

196

WebSocket 机制以下简要介绍一下WebSocket的原理及运行机制。 WebSocket是HTML5下一种新的协议。它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。它与HTTP一样通过已建立的TCP连接来传输数据，但是它和HTTP最大不同是： WebSocket是一种双向通信协议。在建立连接后，WebSocket服务器端和客户端都能主动向对方...

Vue中使用WebSocket

tutodelinglimgho的博客

05-07

1357

WebSocket是一种在单个TCP连接上进行全双工通信的协议。它允许客户端和服务器之间进行实时、双向的数据交换，而无需客户端不断发送请求。WebSocket协议通过HTTP/1.1协议的101状态码进行握手。在握手过程中，浏览器和服务器协商使用的协议版本、支持的子协议、支持的扩展选项等。一旦握手完成，连接将保持打开状态，客户端和服务器就可以在连接上实时地传递数据。WebSocket协议支持二进制数据和文本数据，可以自由地在它们之间进行转换。

Vue中使用webSocket

mm0715的博客

08-19

423

<template> <div class="test"> </div> </template> <script> export default { name : 'test', data() { return { websock: null, } }...

vue中使用webSocket

weixin_39593730的博客

08-03

2145

在vue中一次链接webSocket，多次通讯使用； 1、首先在app.vue 中建立连接；直接写一个function 调用 localSocket() { // webSocket let that = this; if ('WebSocket' in window) { console.log('浏览器支持webSocket'); ...

Vue中使用 WebSocket

明天也要努力的博客

01-23

2597

1. WebSocket 简介前端和后端的交互模式最常见的就是：前端发数据请求，从后端拿到数据后展示到页面中。如果前端不做操作，后端不能主动向前端推送数据，这也是http协议的缺陷。一种新的通信协议应运而生 WebSocket，它最大的特点就是服务端可以主动向客户端推送消息，客户端也可以主动向服务端发送消息，实现了真正的平等。 WebSocket 其他特点：建立在 TCP 协议之上，服务器端的实现比较容易；与 HTTP 协议有着良好的兼容性；默认端口也是80和443，并且握手阶段采用 HTT

vue使用websocket

weixin_42845571的博客

05-08

5360

这样写websocket是在该页面实例化一个websocket，每次刷新页面或者重新进入该页面都会新建一个websocket实例，在真实业务中很少会这样处理。所以就需要将websocket定义为全局实例，跟随vue实例的创建而创建，销毁而销毁。因为使用websocket的目的只是做消息推送，所以使用了set存储客户端的连接。根据个人习惯，echarts根据数据更新自动刷新，我喜欢这样写，图表不更新的时候可以尝试一下。echarts的使用在此就不再赘述了，不了解的话，可以点击 vue使用echarts。

vue界面可以嵌入另一个项目的vue页面吗？

03-31

是的，Vue界面可以嵌入另一个项目的Vue页面。这可以通过使用Vue的组件化功能来实现。可以将一个Vue组件作为另一个Vue项目的子组件，并在后者的页面中使用它。这样做可以使开发人员在不同的项目中重用代码和组件，从而提高开发效率。但需要注意的是，两个项目的Vue版本和依赖库需要保持一致，否则可能会出现兼容性问题。