前端websocket的使用

已于 2024-04-18 09:12:46 修改
阅读量262 收藏
点赞数 2
文章标签： websocket 网络协议 网络 前端
于 2024-04-17 10:57:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73250108/article/details/137861263
版权

1.创建js文件，定义一个 socketClient类来实现websocket组件化开发，在constructor方法中接收url和参数，将 接收url和参数（状态）保存在实例中。

2.定义initWebSocket函数初始化WebSocket连接，并且在里面处理链接错误，链接关闭，从服务器接受到信息的回调函数

## websocket.send方法用于向服务器发送信息（注意参数是字符串）

## websocket.close方法用于关闭WebSocket连接（关闭前要清除心跳包定时器，或者其他相关的定时器）

3.导出

4.在main.js中引入，全局挂载并且建立链接，这样就可以全局使用啦！！！（当然vuex也可以哦）

url不同可以创建多个链接

秋刀鱼可好吃啦
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
WebSocket需要的前端sockjs脚本
05-14
springboot2.0 集成WebSocket（服务端实时向客户端发送信息)sockjs.min.js
websocket简单使用
09-05
在"websocket简单使用"这个主题中，我们将探讨如何使用WebSocket来构建一个简单的聊天室。首先，我们需要理解WebSocket的基本概念和工作原理。WebSocket协议基于TCP，并且通过HTTP/1.1的Upgrade头来建立连接。一旦...
【前端WebSocket的使用 （超详细）】
zhs18331166003的博客
08-07 6771
前端WebSocket的使用，如何使用WebSocket，WebSocket
前端webScoket使用方法
qq_54413072的博客
02-28 266
webscoket
前端web端使用WebSocket进行通信
最新发布
L2043524156的博客
05-28 1001
WebSocket 是一种在 Web 开发中用于实现双向通信的协议，它允许客户端和服务器之间建立持久的连接，以便在连接上进行实时的数据传输。相较于传统的 HTTP 请求，WebSocket 具有更低的延迟和更高的效率，适用于需要实时性较高的场景，比如聊天应用、实时数据展示等。
前端 WebSocket 的使用
weixin_48845614的博客
09-01 1万+
WebSocket
前端 webSocket 的使用
lzfengquan的博客
02-19 947
例子：现在需要根据用户不同的输入来获取后端不同的数据，http请求的方式就是每次用户输入我就发送一个http请求。然而websocket的解决是一次连接成功后，每次用户输入都会发送给后台，但是这个发送的数据却是一直处在已经连接的状态，并不是每次想http每一次都是一次新的连接。结合上述用法可以自行封装（不一定适用你的项目，不过大致逻辑就是这样）webSocket使用。
WebSocket的使用指南---前端
Hollybaicai的博客
06-30 2659
使用：创建Wevsocket实例化const hanclick=(()=>{ //点击是触发方法//创建Wevsocket实例化console.log("失败了");//建立失败的函数// 当连接建立成功，触发 open 事件console.log("建立连接成功 ...");// 连接建立成功以后，就可以使用这个连接对象通信了// send 方法发送数据// 当接收到对方发送的消息的时候，触发 message 事件。
websocket使用案例
08-28
在这个"WebSocket使用案例"中，我们可以预期会了解到以下关键点： 1. **WebSocket握手**：WebSocket连接的建立始于客户端发起一个HTTP Upgrade请求，服务器回应101 Switching Protocols状态码，表示同意升级到...
websocket前端页面
03-09
vue项目的其中一部分 前期的 token，路由守卫和session的存储都要成功配置。 websocket前端页面 详细信息：https://blog.csdn.net/weixin_51508961/article/details/129363809
websocket前端页面与后台交互的例子
12-19
websocket前端页面与后台交互的例子,解压文件后，用idea导入项目，启动WebsocketServer类，接着用浏览器打开websocket.html页面，会看到建立连接，然后在发送框输入{"id":"1","type":"yes"}，返回666，输入其他信息会提示相应信息
websocket前端封装
08-25
websocket前端封装
前端开源库-robust-websocket
08-29
开发者可以下载解压后，按照文档的指示进行安装和使用，将`robust-websocket`集成到自己的前端项目中，以提升WebSocket连接的稳定性。 总之，`robust-websocket`是前端开发者实现WebSocket功能的一个强大工具，它...
前端实现WebSocket的用法
xin的博客
03-13 1900
关于WebSocket通信机制,前端依赖jQuery实现的方法如下: $(function(){ $.ajaxSettings.async=false; $.post('url地址/show/doSaveSession',{'hotelid':1},function(data){ console.log("执行保存session");//模拟先登录 ...
前端如何使用WebSocket发送消息
chen520的博客
07-01 6169
WebSocket协议是一种在Web应用程序中实现实时双向通信的协议。它提供了一种持久性的连接机制，允许服务器和客户端之间进行实时数据的双向传输。与传统的HTTP协议不同，WebSocket协议通过一次握手即可建立连接，并保持连接的状态，使得服务器和客户端可以随时发送和接收数据，而无需再次发送HTTP请求。这种双向通信方式在实时应用中具有重要意义，如实时聊天、协作工具、股票行情等。
前端 websocket 的简单使用
热门推荐
swk963的博客
06-14 1万+
websocket创建实例, 监听事件 if (window.WebSocket){ let ws = new WebSocket('地址') // 建立连接 ws.onopen = function(){ } // 服务器连接成功 ws.onclose = function(){ } // 服务器连接关闭 ws.onerror = function(){ } // 服务器连接出错 ws.onmessage = function(){ } //
webSocket使用（前端）
m0_57594854的博客
03-08 952
前端连接webSocket
Websocket 入门学习实例
Harris的博客
09-08 631
<!DOCTORY html> <html> <head> <meta charset="utf-8" /> <title>Websocket</title> </head> <body> <h1>Echo Test</h1> <input id="sendTxt" type="text" />
前端websocket
05-01
前端WebSocket通常指在网页或移动端应用程序中使用WebSocket协议实现双向通信。WebSocket协议是一种基于TCP协议的轻量级通信协议，其特点是实现了长连接，能够实现实时双向通信。前端通过WebSocket API可以连接到...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值