【实战记录】WebSocket在vue2中的使用

本文为博客 VIP 文章,开通 VIP 后可阅读全文

开通 VIP

什么是WebSocket

官方说, WebSocketHTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。但是我对网络协议并不了解,用实际用途去解释它就是,它支持服务端主动给客户端发送消息。

WebSocket 出现之前,我们要获取服务端的数据只能通过 客户端向服务端发送请求,服务端接到请求后返回数据,但是这样有一个很明显的缺点就是那些需要 频繁接收数据 的场景就需要不断的向服务端发送请求.比如聊天室,实时天气等, 以前的方法就是"轮询",意思就是每隔一段时间,发送一次请求.这样就会有两个很明显的弊端.

一是非常浪费资源,二是做不到真正的实时刷新 WebSocket 的出现很好的解决了这个问题.

WebSocket 创建

执行下面语句之后,客户端就会与服务器进行连接。

WebSocket 对象作为一个构造函数,用于新建 WebSocket 实例。

var ws = new WebSocket('ws://localhost:3000'); 

WebSocket 属性

Socket.readyState 表示连接状态

  • 0 - 表示连接尚未建立。
  • 1 - 表示连接已建立,可以进行通信。
  • 2 - 表示连接正在进行关闭。
  • 3 - 表示连接已经关闭或者连接不能打开。

WebSocket 事件

Vue2 使用WebSocket实现前端与后端的实时通讯 WebSocket是一种在单个TCP连接上进行全双工通信的协议,它能够在客户端和服务器之间建立持久的连接,使得实时通讯成为可能。在前端开发中,WebSocket通常用于实现实时消息推送、实时数据更新等功能,为用户提供更流畅、即时的体验本文将介绍如何在前端项目中利用WebSocket实现与后端的实时通讯,并结合具体的代码示例进行讲解。 阅读详情

相关推荐

webSocket使用vue中封装使用(客户端和服务端搭建)

一、Websocket简介 Websocket是一个持久化的网络通信协议,可以在单个TCP连接啥功能进行全双工通信,客户端和服务端没有了Request和Response的概念,地位平等,一旦连接建立,客户端和服务端之间可以实时进行双向数据传输。 ...

是日前端 6345

初探WebSocket

定义     WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行==全双工通讯的协议==。 WebSocket 使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在 WebSocket API 中,浏览器和服务器==只需要完成一次握==手,两者之间就直接可以==创建持久性的连接==,并进行双向数据传输。     WebSocket 能...

dengtongcanfan4634的博客 421

Vue2.0中websocket使用-demo

通过以上方式,可以在 Vue 应用中高效地集成 WebSocket 功能,实现实时通信需求。建议根据项目规模选择原生实现或使用成熟的库(如 Socket.io)在 Vue使用 WebSocket 可以实现实时双向通信,适用于聊天应用、实时数据监控等场景。在 Vue 组件中直接使用原生 WebSocket API。

JackieDYH的博客 251

Vue2使用WebSocket

WebSocket是一种通信协议,能够在客户端和服务器之间建立全双工通信通道。与传统的HTTP请求不同,WebSocket允许服务器主动向客户端发送数据,从而实现实时通信。本文将详细介绍如何在Vue2项目中集成和使用WebSocket,并通过具体代码示例演示其使用方法。

浮游的博客 3855

2022春招前端最新面试题分享(九州云)

九州云 公司及岗位信息 公司: 浙江九州云信息科技有限公司 岗位: 前端开发工程师 地点: 上海 薪资: 15k 面试结果: 全部通过, HR已给口头Offer 一面(2022/04/08) 简短的自我介绍 实习中做过的项目 JS都有哪些数据类型 如何判断一个数据是否是数组, 说出知道的所有方式 说一下你理解的EventLoop 说一下你理解的闭包, 使用场景 说一下你理解的原型和原型链, prototype是做什么的 new一个对象时, 经历了什么 class中constructor的作用 在cla

CreatorRay的博客 1562

vue跨域使用websocket_vue使用websocket问题记录

最近笔者新参与的一个web项目,拟定采用vue2.0来编写,期间遇到有关使用websocket的问题,记录一下,个中遇到的一些问题和解决方法,分享给有需要的人。首先说一下vue2.0的初学体验,目前感觉上手还是很快的,对比其他框架比如angularjs,react等,的确是轻量级很多,并且确实如作者尤大大所诉,真实体会到了其渐进式前端解决方案的思想 ,你完全可以根据项目的实际情况,选择性的采用最适...

weixin_36051633的博客 4299

vue使用websocket问题记录

小编推荐:Fundebug提供JS错误监控、微信小程序错误监控、微信小游戏错误监控,Node.j错误监控和Java错误监控。真的是一个很好用的错误监控费服务,众多大佬公司都在使用。 最近笔者新参与的一个web项目,拟定采用vue2.0来编写,期间遇到有关使用websocket的问题,记录一下,个中遇到的一些问题和解决方法,分享给有需要的人。   首先说一下vue2.0的初学体验,目前感觉上手...

qq_40126542的博客 2315

websocketvue2中的封装使用

先说需求: 页面中有websocket连接,进入的时候发送参数到后端,后端发送消息, 离开页面时发送参数至后端,后端停止发送消息,不得断开连接, 下一次进入时页面时不用再次连接。

weixin_46587302的博客 3257

vue2全局使用websocket记录

考虑到登录之后要始终连接服务器接收消息,所以把websocket实例对象作为模块抛出,在main.js中引入,使全局都可以获得ws并且使用相关方法。 由于刷新页面时,ws会自动断开连接,所以在App.vue组件挂载时再次连接服务器。 新建ws模块文件 该文件位置任意,引入的时候注意路径即可 export default { ws: {}, setWs: function(newWs) { this.ws = newWs }, start(){// 发送心跳.

qq_51983617的博客 2465

VUE3.0实现websocket

VUE3.0实现websocket 1、 vue2.0与vue3.0的区别 先说一下网上很多资料的websocket都是针对vue2.0的,我这个vue入门小菜鸟,对于vue的整体实现过程理解还是有偏差,因而记录2.0到3.0的变化。其参考了该博主的文章链接: 让你30分钟快速掌握vue 3。 其主要是对vue3.0新增了setup函数,取消了data变量的赋值。感兴趣的可以自行阅读。这里只做记录Vue2--------------vue3 beforeCreate -> setup() cr

xiexiangyan的博客 2万+

Flask:使用SocketIO实现WebSocket与前端Vue进行实时推送(gevent-websocket、flask-socketio、flask不出现running on 127..问题)

本文旨在记录使用Flask框架过程中与前端Vue对接过程中,存在WebSocket总是连接失败导致前端取不到数据的问题。以及在使用WebSocket相关功能的库包gevent-websocket之后,导致运行Flask项目之后,控制台没有显示running on 127.0.0.1:5000 问题、以及没有输出log日志记录的问题、以及总是报错Websocket connection to‘ws://127.0.0.1:5000/socket.io/?EIO=4&transport=websocket’fa

努力才是唯一的入场券。 10万+

vue2 使用WebSocket

带离开页面 刷新页面 关闭WebSocket

weixin_53322542的博客 2559

WebScoket入门(vue2)

WebScoket入门(vue2)

Giraffe0615的博客 3077

websocket报错DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state

webscoket初始化后this.socket.send(message)时报错:DOMException: Failed to execute 'send' on 'WebSocket': Still in CONNECTING state vm.init() vm.send() 要明白这个问题产生的原因,就需要了解websocket的几个状态。通常在实例化一个websocket对...

yangwq的博客 3万+

vue2使用webSocket双向通讯

由于浏览器的资源管理策略会暂停或限制某些资源的消耗,导致前端心跳包任务时效,后端接收不到webSocket心跳主动断开,因此需要使用webworker保持心跳。引入webworker。

qq_32900003的博客 1769

vue2实现websocket的聊天应用

首先,我们需要简单了解一下websocket:HTTP 协议是一种无状态的、无连接的、单向的应用层协议。它采用了请求/响应模型。通信请求只能由客户端发起,服务端对请求做出应答处理,HTTP 协议无法实现服务器主动向客户端发起消息。这种单向请求的特点,注定了如果服务器有连续的状态变化,客户端要获知就非常麻烦。大多数 Web 应用程序将通过频繁的异步 JavaScript 和 XML(AJAX)请求实现长轮询。轮询的效率低,非常浪费资源。

weixin_46002095的博客 2366

封装websocket请求-----vue2

(875条消息) 封装websocket请求-----vue项目实战(完整版)_vue websocket封装_winne雪的博客-CSDN博客。

python_web全栈 2066
上一篇: 【动效实现】超酷炫的 3D 视差 Hover 效果
下一篇: 4个你可能不知道的编码好习惯,让你的代码变得更好
梅花十三儿
博客等级 码龄5年 1035粉丝 444原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值