WebSocket 前端封装

最新推荐文章于 2024-06-21 16:19:05 发布
最新推荐文章于 2024-06-21 16:19:05 发布
阅读量611 收藏
点赞数
文章标签： 网络 前端 后端 ViewUI
原文链接：http://www.cnblogs.com/gulehoo/p/10695842.html
版权 
$.extend({
    socketWeb:function (opt) {
        if("WebSocket" in window){
            var setting=$.extend({
                url:'',
                opens:{},
                messages:{},
                closes:{},
                err:{}
            },opt);
            var ws=new WebSocket(setting.url);
            ws.onopen=setting.opens();
            ws.onmessage=setting.messages();
            ws.onclose=setting.closes();
            ws.οnerrοr=setting.err();
        }else{
            alert("您的浏览器不支持 WebSocket!");
        }

    }
});



$.socketWeb({
   url:'ws://http://127.0.0.1:1234/',
   opens:function (ev) {

   } ,
    messages:function (ev) {

    },
    closes:function (ev) {

    },
    err:function (ev) {

    }
});

转载于:https://www.cnblogs.com/gulehoo/p/10695842.html

weixin_30716141
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端基于WebSocket封装
盼盼盼的博客
09-16 1255
1.无心跳，短开连接之后重新连。 class webSocketClass { constructor(name) { this.lockReconnect = false; this.localUrl = "ws://XXXXXX"; this.wsUrl = ""; this.globalCallback = null; this.userClose = false; this.createWebSocket(name); } createW
websocket封装
码农键盘上的梦
05-31 825
websocket在前端开发中，是一个必须掌握的技术！你可以不用，但必须掌握！前几天，就遇到这样一个需求，要求界面的数据通过websocket实时推送，并且必须支持断网重连、自动心跳！自动心跳是定期向服务端发送小型数据包，如果一段时间内服务端没有收到心跳响应，系统可能会断开连接。websokect的API非常简单// 创建ws连接console.log('WebSocket 连接已经建立。');');console.log('收到服务器消息：', event.data);
基于HTML5 WebSocket服务端的封装
09-22
基于HTML5 WebSocket服务端的封装，绝对能用，让你不用费神捣鼓websocket方面的东西了，
前端WebSocket 封装
weixin_45782529的博客
02-18 2525
我封装的这是需要启动项目就立即连接，所以我在封装的js中自调用了连接函数，在main.js中引入该js文件，看你们需求再自己稍微变动一下吧提示：以下是本篇文章正文内容，下面案例可供参考以上就是webSocket封装过程，不对的地方不用多多指教，哈哈哈哈。
封装websocket请求-----vue项目
最新发布
weixin_66664693的博客
06-21 1318
如果项目中多个组件都使用到WebSocket请求，那么我们需要对WebSocket进行封装，方便我们使用。下面我根据我的项目结构来创建文件和引入文件，大家注意一下自己项目结构。一、在utils目录下创建websocket.js文件import { getToken } from '@/utils/authToken' // 与后端的协商，websocket请求需要带上token参数// 接收ws后端返回的数据/*** 发起websocket连接。
前端封装websocket，好用的话留个赞哦！
AlmostLkl的博客
10-18 417
/ 如果接收到的消息不是心跳消息，则立刻重置心跳时间，并再次发起一次心跳。// 这里把接收到的消息传入到回调函数中，在组件内可获取接收的消息。// 如果接收到的消息是心跳消息，则会继续发送心跳，保持连接畅通。console.log('连接失败');console.log('断开连接');// 避免了传统的轮询心跳带来的不必要的损耗。/**打开WS之后发送心跳 *//**接收的消息回调*//**建立连接 *//**失败重连 *//**断开连接 *//**接收消息 *//**发送心跳 */
前端WebSocket封装
张钦的博客
05-11 247
WebSocket简易封装，用于简化WebSocket的使用过程，包括自动处理连接、消息收发、心跳检测、断线重连以及事件监听等功能，用于简化业务调用。此处以Vue3调用为例
websocket前端封装
08-25
websocket前端封装
vue封装websocket.zip
02-24
在Vue项目中，对WebSocket进行封装能够提高代码的可维护性和重用性。 首先，让我们深入理解一下WebSocket。WebSocket是一种在客户端和服务器之间建立长期连接的协议，它允许双方进行全双工通信，即双方可以同时发送...
angular集成websocket_Angular Websocket教程
weixin_34614567的博客
01-14 1018
Angular Websocket教程在本教程中，我们将介绍如何实现一个非常简单的基于WebSocket的Angular应用程序。本教程版本：angular ^6.1.0rxjs ^6.0.0浏览器兼容性在这个时候，我认为让你知道websocket浏览器的兼容性不是100％，一些旧的浏览器可能不支持WebSockets是个好主意。因此，如果您暂时没有更新，本教程可能无法在您的浏览器中运行。Angu...
websocket封装包
12-30
android开发中，使用okhttp和websocket，建立稳定可靠的长连接，亲测，没有任何问题，欢迎下载
vue3使用websocket简易封装，包含错误重连机制
山野里的小菊花
10-27 7610
websocket实现的全双工通信，真真太香了，以下是笔者在使用时，自己封装的一个简易js工具。
前端封装WebSocket
story_in_sh的博客
08-28 900
最近遇到的项目不少都要使用websocket，这儿我把它封装起来，使用起来非常简单。 1.首先在项目里面创建一个webSocketUtils.js的文件 let FarmWebSocket = function ({ url, sendMessage, webSocketBack, pingTimeout = 15000, pongTimeout = 10000, reconnectTimeout = 2000, pingMsg = 'heartbea
封装一套前端几乎通用的WebSocket代码
多吉
10-10 5077
前言 对接过几次WebSocket连接，无论是在纯JavaScript、Vue亦或Uniapp等框架语言中使用，Socket代码流程基本上差不多。无非就是： 发起连接 发送数据（发送心跳等） 接收数据 关闭连接 断线重连 异常处理… 每次都需要重写比较麻烦，故封装一套大致流程的WebSocket代码，哪怕从纯JavaScript项目搬到Vue、Uniapp等框架中，也只需要做小部分修改即可。 具体实现 创建socket.js，代码如下： // 在Vue中使用，不需要可以去除以下引用 import Vue
WebSocket 的封装
qq_45747074的博客
04-30 553
然后为了方便在 项目中进行使用，我们自定义一些 Hooks。websocket 具体内容参考了。showNotify 的自定义。
WebSocket 封装
shadowee的专栏
08-18 790
main.socket = { ws:null, state:false, autoReConnnect:function(){ if(!main.socket.state){ setInterval(main.socket.connectSocketServer,10 * 60 * 1000); } },
前端封装websocket
05-13
前端可以使用 WebSocket API 封装 WebSocket。WebSocket 可以在客户端和服务器之间建立持久性连接，以进行双向通信。以下是一个简单的 WebSocket 封装示例： ```js class WebSocketClient { constructor(url) { this.url = url; this.socket = null; } connect() { this.socket = new WebSocket(this.url); this.socket.onopen = () => { console.log('WebSocket connection established'); }; this.socket.onmessage = (event) => { console.log(`Received message: ${event.data}`); }; this.socket.onclose = () => { console.log('WebSocket connection closed'); }; this.socket.onerror = (error) => { console.error(`WebSocket error: ${error}`); }; } send(message) { if (this.socket.readyState === WebSocket.OPEN) { console.log(`Sending message: ${message}`); this.socket.send(message); } else { console.error('WebSocket connection not open'); } } close() { this.socket.close(); } } ``` 使用方法： ```js const socket = new WebSocketClient('ws://localhost:8080'); socket.connect(); socket.send('Hello, server!'); socket.close(); ``` 以上代码创建了一个 WebSocketClient 类，将 WebSocket API 封装在其中。它包括一个 connect() 方法，用于建立与 WebSocket 服务器之间的连接，一个 send() 方法，用于发送消息，以及一个 close() 方法，用于关闭连接。可以根据需要添加其他方法。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值