前端实现websocket的应用场景以及逻辑实现

这篇具有很好参考价值的文章主要介绍了前端实现websocket的应用场景以及逻辑实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前端实现websocket的应用场景以及逻辑实现

前端在基础业务逻辑外,根据具体的业务需求还可以实现更复杂的交互逻辑,如:

  • 数据同步:WebSocket 可用于实时更新数据,当服务器端数据发生变化时,通过 WebSocket 将变化的数据推送给前端,以保持数据的实时同步。
  • 聊天功能:使用 WebSocket 实现实时聊天功能,前端用户可以发送消息给服务器并接收其他用户发送的消息。
  • 多用户协同编辑:通过 WebSocket 将多个用户之间的编辑操作实时同步,实现多人协同编辑功能。
  • 实时数据展示:将实时数据从服务器传输到前端,展示在页面上,如股票行情、实时天气等。

websocket实现逻辑

  1. 连接建立:

    • 当 WebSocket 连接成功建立时,触发 onopen 事件处理程序。
    • 可以在该处理程序中发送认证信息或其他初始化数据给服务器,例如用户身份验证、订阅特定频道等。
  2. 消息收发:

    • 当收到服务器发送的消息时,触发 onmessage 事件处理程序。
    • 可以解析并处理服务器发送的消息内容,并根据业务需求进行相应的操作,如展示在页面上、更新本地数据等。
    • 如果有需要,可以将某些消息分类,使用不同的处理逻辑。
  3. 错误处理:

    • 当发生错误时,触发 onerror 事件处理程序。
    • 可以在该处理程序中记录日志、展示错误提示信息等。
  4. 连接关闭:

    • 当 WebSocket 连接关闭时,触发 onclose 事件处理程序。
    • 可以在该处理程序中进行必要的清理工作、重新连接尝试或展示状态信息。
  5. 断线重连:

    • 如果由于网络问题等原因导致 WebSocket 连接断开,可以尝试自动进行断线重连。
    • 可以在 onclose 事件处理程序中实现重新连接逻辑,例如等待一定时间后再次尝试连接服务器。
  6. 心跳保持:

    • 如果需要保持 WebSocket 连接的活跃状态,可以实现心跳机制。
    • 可以定时向服务器发送心跳消息,确保连接不会因为长时间无数据传输而断开。

代码示例:

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');

// 连接成功时触发
socket.onopen = function(event) {
  console.log('WebSocket 连接已建立');
  
  // 发送消息到服务器
  socket.send('Hello, server!');
};

// 接收到服务器发送的消息时触发
socket.onmessage = function(event) {
  const message = event.data;
  console.log('收到消息:', message);
  
  // 关闭 WebSocket 连接
  socket.close();
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('WebSocket 连接已关闭');
};

// 连接发生错误时触发
socket.onerror = function(error) {
  console.error('WebSocket 错误:', error);
};

首先通过 new WebSocket(url) 创建了 WebSocket 对象,并指定要连接的服务器地址。然后,通过设置 WebSocket 对象的各种事件处理程序来处理不同的事件,例如 onopen 处理连接成功、onmessage 处理接收消息、onclose 处理连接关闭等。在 onopen 处理程序中,可以使用 send() 方法向服务器发送消息。而在 onmessage 处理程序中,可以通过 event.data 获取服务器发送的消息内容。

需要根据实际情况将 ws://example.com/socket 替换为实际的 WebSocket 服务器地址。通常,后端会提供一个 WebSocket 服务器供前端连接。

另外,需要注意的是,WebSocket 连接是异步的,并且在浏览器中只能与支持 WebSocket 协议的服务器进行连接。在开发过程中,可以使用 localhost 或部署在本地的服务器进行测试。

前端实现 WebSocket 的心跳监听

在前端实现 WebSocket 的心跳监听,可以使用定时器定期发送心跳消息来保持连接的活跃状态。以下是一个示例代码:

// 创建 WebSocket 连接
const socket = new WebSocket('ws://example.com/socket');

// 心跳相关变量
let heartbeatTimer = null;
const heartbeatInterval = 30000; // 心跳间隔时间,单位为毫秒

// 连接成功时触发
socket.onopen = function(event) {
  console.log('WebSocket 连接已建立');
  
  // 开始发送心跳消息
  startHeartbeat();
};

// 接收到服务器发送的消息时触发
socket.onmessage = function(event) {
  const message = event.data;
  console.log('收到消息:', message);
  // 处理接收到的消息
  
  // 重置心跳计时器
  resetHeartbeat();
};

// 连接关闭时触发
socket.onclose = function(event) {
  console.log('WebSocket 连接已关闭');
  
  // 停止心跳计时器
  stopHeartbeat();
};

// 连接发生错误时触发
socket.onerror = function(error) {
  console.error('WebSocket 错误:', error);
  
  // 停止心跳计时器
  stopHeartbeat();
};

// 发送心跳消息
function sendHeartbeat() {
  socket.send('heartbeat'); // 发送心跳消息
}

// 开始心跳
function startHeartbeat() {
  heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval);
}

// 重置心跳计时器
function resetHeartbeat() {
  clearInterval(heartbeatTimer); // 清除旧的计时器
  heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval); // 开启新的计时器
}

// 停止心跳
function stopHeartbeat() {
  clearInterval(heartbeatTimer);
}

我们创建了一个名为 heartbeatTimer 的定时器变量,并设置了心跳间隔时间为 30 秒(30000 毫秒)。在连接成功建立时,会调用 startHeartbeat() 函数开始发送心跳消息,并在接收到服务器发送的消息时调用 resetHeartbeat() 函数来重置心跳计时器。当连接关闭或发生错误时,会调用 stopHeartbeat() 函数停止心跳计时器。

通过以上实现,定时器会定期调用 sendHeartbeat() 函数发送心跳消息给服务器,以保持连接的活跃状态。每次收到服务器发送的消息时,都会重置心跳计时器,确保连接不会因为长时间无数据传输而断开。文章来源地址https://www.toymoban.com/news/detail-716865.html

到了这里,关于前端实现websocket的应用场景以及逻辑实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue+springboot+websocket实现消息通知,含应用场景

    vue、springboot 实现场景 点击同步之后更新数据,更新时间比较长,因此使用异步,之后该按钮置灰,在数据更新完成之后,服务端通知客户端已经同步成功,通知提示框,用户即可查看数据 前端 1、在对应的页面编写初始化、连接成功,错误,接受信息方法 2、mounted或者cre

    2024年02月11日
    浏览(77)
  • 数据结构的应用场景:如社交网络、路由算法、图论、网络协议等

    作者:禅与计算机程序设计艺术 数据结构(Data Structure)是计算机科学中存储、组织、管理数据的方式,主要用于解决信息检索、处理和运算时的效率及空间占用问题。它是指数据元素(elements)之间的关系、顺序和逻辑结构,以及相互作用的算法。数据结构通常采用抽象数据类

    2024年02月14日
    浏览(47)
  • 前端(二十一)——WebSocket:实现实时双向数据传输的Web通信协议

    🤨博主:小猫娃来啦 🤨文章核心: WebSocket:实现实时双向数据传输的Web通信协议 在当今互联网时代,实时通信已成为很多应用的需求。为了满足这种需求,WebSocket协议被设计出来。WebSocket是一种基于TCP议的全双工通信协议,通过WebSocket,Web应用程序可以与服务器建立持久

    2024年02月04日
    浏览(64)
  • SpringBoot项目整合WebSocket+netty实现前后端双向通信(同时支持前端webSocket和socket协议哦)

    目录   前言 技术栈 功能展示 一、springboot项目添加netty依赖 二、netty服务端 三、netty客户端 四、测试 五、代码仓库地址   专属小彩蛋:前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站(前言 - 床长人工智能教程

    2024年02月12日
    浏览(50)
  • 持久双向通信网络协议-WebSocket-入门案例实现demo

    1 介绍 WebSocket 是基于 TCP 的一种新的 网络协议 。它实现了浏览器与服务器全双工通信——浏览器和服务器只需要完成一次握手,两者之间就可以创建 持久性 的连接, 并进行 双向 数据传输。 HTTP协议和WebSocket协议对比: HTTP是 短连接 (一次响应完即消除) WebSocket是 长连接

    2024年01月16日
    浏览(47)
  • 前端面试:【网络协议与性能优化】提升Web应用性能的策略

    嗨,亲爱的Web开发者!构建高性能的Web应用是每个开发者的梦想。本文将介绍一些性能优化策略,包括资源加载、懒加载和CDN等,以帮助你提升Web应用的性能。 1. 性能优化策略: 压缩资源: 使用Gzip或Brotli等压缩算法来减小CSS和JavaScript文件的大小,加快加载速度。 合并文件

    2024年02月11日
    浏览(41)
  • 【Java基础教程】(四十七)网络编程篇:网络通讯概念,TCP、UDP协议,Socket与ServerSocket类使用实践与应用场景~

    了解多线程与网络编程的操作关系; 了解网络程序开发的主要模式; 了解 TCP 程序的基本实现; 在Java中,网络编程的核心意义是实现不同电脑主机之间的数据交互。Java采用了一种简化的概念,将这个过程进一步抽象为JVM(Java虚拟机)进程之间的通信。可以在同一台电脑上

    2024年02月15日
    浏览(67)
  • “Jmeter WebSocket协议压测”,助你轻松应对高并发场景!

    目录 引言 背景说明 步骤1:安装插件JMeter WebSocket Samplers 步骤2:采集器使用 步骤3:脚本执行  结语 在当今高并发的网络环境下,WebSocket协议已经成为了最受欢迎的实时通信技术之一。 然而,对于开发人员来说,如何有效地压测WebSocket协议仍是一个挑战。 Jmeter是一款功能强

    2024年02月14日
    浏览(36)
  • Springboot 整合 WebSocket ,使用STOMP协议+Redis 解决负载场景问题

    ObjectMapper om = new ObjectMapper(); om.setVisibility(PropertyAccessor.ALL, JsonAutoDetect.Visibility.ANY); om.enableDefaultTyping(ObjectMapper.DefaultTyping.NON_FINAL); jacksonSeial.setObjectMapper(om); template.setValueSerializer(jacksonSeial); template.setKeySerializer(stringRedisSerializer); template.setHashKeySerializer(stringRedisSerializer); template

    2024年04月14日
    浏览(54)
  • [前端基础]websocket协议

    (1)websocket websocket(简写为ws),是一种轻量化的协议,经过最开始的握手阶段以后,前后端之间允许自由地发送信息不受限制(建议发送json字符串).虽然理论上这个东西是属于协议内容,但是已经被疯狂封装得像框架一样了. websocket协议具有天然的优势处理前端多线程并发,并且只需要一

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包