Vue系列:Websocket 使用配置

WebSocket 是什么?

WebSocket  是一种网络通信协议。而且是在 HTML5 才开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。

 

为什么需要 WebSocket ?

了解计算机网络协议的人,应该都知道:HTTP 协议是一种无状态的、无连接的、单向的应用层协议。

HTTP的弊端:无法实现服务器主动向客户端发起消息,它不支持持久连接的。

在websocket之前,传统的实现长轮询方法主要有: http long poll 或者ajax轮询。但轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开)。

 

如何配置 WebSocket ?

本篇主要讲解客户端的配置。而且没有必要为 WebSockets 使用 JavaScript 库。

实现 WebSockets 的 Web 浏览器将通过 WebSockets 对象公开所有必需的客户端功能(主要指支持 Html5 的浏览器)。

 

以下 API 用于创建 WebSocket 对象。

以上代码中的第一个参数 url, 指定连接的 URL。第二个参数 protocol 是可选的,指定了可接受的子协议。

 

具体配置代码如下:

 

转载于:https://www.cnblogs.com/One-sprite/p/10096887.html

Vue配置WebSocket的过程中,你可以在需要使用的页面添加监听事件,通过mounted()方法来添加socket通知的监听。比如,在mounted()方法中使用window.addEventListener()方法来监听'onmessageWS'事件,并将其回调函数设置为getSocketData。接下来,在methods对象中定义getSocketData方法来处理收到的消息。在getSocketData方法中可以进行业务处理,比如判断消息是否满足条件,然后执行相应的操作。 如果你在项目中使用WebSocket,并需要在不同的页面进行消息处理,你可以在这些页面中分别添加监听事件来实现。通过监听'onmessageWS'事件,然后在对应的回调函数中处理接收到的消息。 在Vue中实现WebSocket,你可以使用WebSockets对象来公开所有必需的客户端功能。这主要适用于支持HTML5的Web浏览器。通过配置WebSocket,你可以实现与服务器的双向通信,并在接收到消息时进行相应的处理。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [vue设置全局webSocket,并在对应页面接受消息通知处理](https://blog.csdn.net/MICHAEL_PRINCE/article/details/124492223)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vue系列Websocket 使用配置](https://blog.csdn.net/MUYI1111/article/details/101267067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值