vue 一直发送请求websocket

最新推荐文章于 2024-07-22 10:57:42 发布

G佳伟

最新推荐文章于 2024-07-22 10:57:42 发布

阅读量2.1k

点赞数

分类专栏： vue 文章标签： vue.js websocket 前端

本文链接：https://blog.csdn.net/gjwgjw1111/article/details/124837162

版权

vue 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

当Vue项目运行时，由于持续的WebSocket请求，控制台出现大量错误，阻碍了接口返回值的查看。解决方法是在`sockjs-client`库的`sockjs.js`文件中注释掉xhr.send(payload)这一行（约在1603-1605行），以消除错误并清理连接。

摘要由CSDN通过智能技术生成

vue项目运行时一直请求websocket，导致控制台，接口大量报错无法查看控制台输出内容以及接口返回值

在这里插入图片描述
解决办法
打开

node_modules\sockjs-client\dist\sockjs.js

文件将 self.xhr.send(payload); 注释即可（大约在1603-1605行左右）

try {
   // self.xhr.send(payload);注释即可
  } catch (e) {
    self.emit('finish', 0, '');
    self._cleanup(false);
  }

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

G佳伟

关注关注

0
点赞
踩
0

收藏

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

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue router缓存，导致页面多次请求接口

qq_35994750的博客

02-13

1186

ps：所有.vue组件文件都必须附上name属性！建议用vuex管理cachedViews。

VUE3中使用webSocket

qq_44915190的博客

10-18

4157

VUE3中使用webSocket

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

vue中使用websocket实现方法---详解

最新发布

m0_74079648的博客

07-22

2136

/定义window.dispatchEvent(new CustomEvent("事件名", {参数key:参数value}))//监听window.addEventListener("事件名", 参数key => {})

VUE项目中一直自动发送websocket请求

头发茂密的假程序猿

04-01

6742

vue中的websocket1. 背景原因说明 1. 背景去年开始学习vue，用vue写了远程视频+聊天的程序，其中聊天用的是websocket。但是最近我发现vue项目即使不引入websocket包，在依赖中也会自动下载，并且每次在浏览器控制台会多一个websocket的请求，因为之前是用的socket聊天，所以我以为这个websocket是我引入的，知道最近我才发现不是这样的。下图是一个直接用webpack初始化的一个项目，没有手动添加任何包，可以看到webpack自动下载了websocket包，并

VUE项目不断请求websocket发送ws请求

qq_44854139的博客

07-26

2446

环境变量配置错误导致的前端一直发送ws请求

vue前端一直发生websocket请求的解决办法

沙门空海

10-07

6373

今天vue前端调试的时候发现，前端一直在莫名其妙的发送websocket请求。如图所示莫名其妙是因为前端根本就没有用到websocket。一顿查询之后发现是因为引入的第三方包sockjs-client导致的，解决办法就是将这个包去掉如果用不到的话，或者按照如图所示的步骤将这段代码注释掉即可文末分享整理的一些学习视频教程网盘资源：https://pan.baidu.com/s/13dbR69NLIEyP1tQyRTl4xw ...

Vue项目不断请求 ‘websocket‘ 问题

weixin_42452567的博客

08-27

2725

项目：Vue 2.6.10 报错原因：由于我对 Apache 配置了端口转发： “www.xxx.com” 至 “localhost:8080”，因而使得 webpack-dev-server 出于安全考虑，默认检查 hostname，检查到 hostname 不是内置的，因而报错。解决方法：修改 vue.config.js ，添加 disableHostCheck: true ...

vue发送websocket请求和http post请求的实例代码

10-16

以下是一个Vue组件`pdf.vue`中的WebSocket请求实例： ```javascript import SockJS from 'sockjs-client'; import Stomp from 'stompjs'; import qs from "qs"; // 不用于WebSocket，用于HTTP POST请求 export ...

vue 实现websocket发送消息并实时接收消息

10-15

Vue项目中实现WebSocket进行消息的发送与接收涉及多个知识点。首先，WebSocket是一种网络通信协议，提供了浏览器和服务器全双工通信的能力，这意味着服务器可以主动向客户端发送信息。在Vue项目中，我们可以通过...

Vue通过配置WebSocket并实现群聊功能

10-15

HTTP是无状态的、单向的请求/响应模型，而WebSocket提供全双工通信机制，即服务器和客户端可以同时发送和接收数据。这使得WebSocket非常适合实时通信场景，如在线聊天室、游戏同步等。在Vue项目中使用WebSocket时...

vue 初始化请求例子_vue发送websocket请求和http post请求的实例代码

weixin_34723270的博客

12-24

989

先给大家介绍下vue发送websocket请求和http post请求直接上代码：pdf.vueimport SockJS from 'sockjs-client';import Stomp from 'stompjs';import qs from "qs"export default {name: "pdf",data() {return {newsData: [],tag...

vue项目运行时一直请求sockjs问题

m0_72642319的博客

05-15

323

vue项目运行时一直请求sockjs问题

vue 实现 websocket 通信

森海か的博客

01-12

2220

Websocket是一个持久化的网络通信协议WebSocket 是HTML5 新增的的特性，（WebSocket 协议的本质上是一个基于tcp的协议）它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的。

vue websocket即时通讯

qq_50917246的博客

03-28

214

vue 封装使用websocket

WebSocket

weixin_57128596的博客

01-24

915

1.客户端发送请求，询问数据——>2.若是服务器有新的数据，将数据一起返回，否则将请求挂起（超时时间），并保持连接**（短轮询：直接返回空响了）** ，当新数据到达时才会返回给客户端。本质就是Web端不断向Server服务端发送一个HTTP请求，如果有新消息，则会将请求返回**（无数据：服务端立即返回空箱，客户端继续问）**1.当用户量大，请求就会频繁发送，服务器就会频繁空响，当服务器没有新数据时也会产生较高的网络流量，浪费服务器的资源 2.无效请求很多。是我们的业务处理器，里面处理客户端的事件。

【知识整理】多次快速请求同一数据接口时，由于请求返回的时间原因导致数据渲染混乱的web前端解决方案

Joanna的博客

10-08

9366

@TOC二欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来...

Vue3 报 WebSocket connection to ‘ws://x.x.x.x:8080/ws‘ failed 的错误

weixin_55988068的博客

11-09

6145

原因：WebSocket是一种双向通信的协议，它在尝试建立到 'ws://x.x.x.x:8080/ws' 的通信失败。原因可能是服务器 'x.x.x.x' 不可用，或WebSocket服务未正确配置。因此，我们去配置一下通信问题。问题：控制台每过几秒就报WebSocket的错误，但是页面显示正常。

解决vue中使用vue-cli脚手架创建项目报错sockjs.js?9be2:1606 GET

浮生离梦的博客

11-26

2492

在使用vue-cli脚手架创建项目的时候，在cnpm create app命令后，项目创建成功后通过npm run serve命令运行以后，控制台报错，sockjs.js?9be2:1606 GET http://192.168.16.105:8080/sockjs-node/info?t=1574662800493 net::ERR_CONNECTION_TIMED_OUT 错误分析： ...

前端vue怎么请求WebSocket接口

05-05

使用Vue.js进行WebSocket的请求，需要使用WebSocket API。以下是一个基本的Vue.js组件的示例代码，用于建立WebSocket连接并发送和接收消息： ```javascript <template> <div> <input v-model="message"> <button @click="send">Send</button> <ul> <li v-for="msg in messages">{{ msg }}</li> </ul> </div> </template> <script> export default { data() { return { socket: null, message: '', messages: [] } }, mounted() { this.socket = new WebSocket('ws://localhost:8080/ws'); this.socket.onmessage = this.onMessage; }, methods: { onMessage(event) { this.messages.push(event.data); }, send() { this.socket.send(this.message); this.message = ''; } } } </script> ``` 在上面的代码中，我们定义了一个`socket`对象，用于建立WebSocket连接。当组件挂载时，我们建立了一个WebSocket连接，并绑定了`onmessage`事件处理程序。在`send`方法中，我们向WebSocket发送消息，并清空文本框。请注意，以上代码仅用于示例目的。在实际应用程序中，您需要根据您的要求进行修改，例如： - 更改WebSocket服务器的URL和端口号。 - 处理连接错误和关闭事件。 - 对消息进行格式化和解析。 - 添加身份验证和安全性措施。希望对你有所帮助！