基于SockJS+Stomp的WebSocket实现

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

前言

    之前做个一个功能,通过websocket长链接接收后台推送的数据,然后在前端动态渲染。一直没来的及输出个文档,现在输出一下。

WebSocket介绍

    WebSocket 是一种在 Web 应用中实现实时通信的方法,它可以在客户端和服务器端之间建立长连接,实现实时消息传递。

    传统的WenSocket在使用过程中可能会有各种问题,什么性能方面啊、浏览器兼容方面啊,各种问题。之前做个一版用传统的WebSocket实现车辆实时位置推送功能,因为后台是广播模式进行的消息推送,一辆车一个通道,当车的数量多起来后,浏览器或WebSocket就直接罢工了,我实测了一下,这个边界值大概在253 - 256。所以,急需更换方案。

SockJS 和 Stomp 库介绍

    SockJS 和 Stomp 是两个常用的 WebSocket 库,它们可以帮助我们更方便地实现 WebSocket 功能。相较于传统的WebSocket,它的优点有很多:

  1. 兼容性更好:能够在浏览器和服务器之间创建低延迟、双向通信通道,能够兼容大多数浏览器和服务器,包括一些老旧的浏览器和服务器。

  2. 自适应性更强:能够根据环境和浏览器自动选择最佳的通信方式,包括WebSocket、XHR流或JSONP轮询等。这样能够更好的保证通信的质量和稳定性。

  3. 底层通信更加可靠:使用了一些底层通信协议,例如XHR流或JSONP轮询,它们能够更好的处理网络故障、代理服务器等问题,从而提高通信的可靠性。

  4. 开发效率更高:提供了一些高级的功能,例如订阅和发布模式、心跳检测等,能够更快速地开发实时Web应用程序。

  5. 跨语言和平台更容易:STOMP协议是一种基于文本的协议,因此它能够更容易地跨语言和平台通信。这意味着您可以使用不同的编程语言和框架来构建您的Web应用程序,并且能够无缝地集成在一起。

总之,使用SockJS + STOMPJS相较于传统模式的Websocket能够更好的保证通信的质量和稳定性,同时能够提高开发效率,从而更好地满足实时Web应用程序的需求。

SockJS

    SockJS 是一个 JavaScript 库,用于在浏览器和 Web 服务器之间建立实时通信连接。它提供了一个 WebSocket 的备选方案,并兼容多种浏览器和 Web 服务器。SockJS 会自动检测浏览器是否支持 WebSocket,如果不支持,则会自动降级为其他协议(如 long polling、iframe、JSONP 等)。

Stomp

    Stomp 是一种简单的消息传递协议,它允许客户端和服务器之间进行异步消息传递。Stomp 协议定义了一个消息格式,允许客户端和服务器进行消息的订阅和发布。Stomp 可以在 Web 应用中使用,也可以在其他应用中使用(如 Android、iOS 等)。

WebSocket 功能类实现

 - 上代码 - 

1. 引入 SockJS 和 Stomp 库

npm install sockjs-client --save

npm install stompjs --save
import SockJS from "sockjs-client";
import Stomp from "stompjs";

2、类实现

class webSocket {
  //构造函数
  constructor() {
    this.tryTimes = 1; // 重连次数
    this.callback = null; // 回调函数
    this.stompClient = null; // stomp对象
    this.reconTimeout = null; //重连延时器
    this.sendTimeout = null; // 重发心跳延时器 - 10s发一次
    this.vm = null;
  }

  /** socket连接 */
  connectionSocket() {
    //连接SockJS
    let socket = new SockJS(`${this.getSocketUrl()}`);

    // 获取STOMP子协议的客户端对象
    this.stompClient = Stomp.over(socket);

    //日志不打印
    this.stompClient.debug = () => {};

    // 向服务器发起websocket连接
    this.stompClient.connect({ userId: '自己订阅送的id' }, () => {
      //tryTimes定义重置
      this.tryTimes = 1;
      //订阅消息
      this.subscribeToServer();
      //心跳单独通道
      this.stompClient.subscribe(`/server/net/${'自己订阅送的id'}`, (response) => { 
        if (response && response.body && JSON.parse(response.body).code == '0') {
          //再次进行心跳发送
          this.heartCheck();
        }
      });
    }, (err) => {
      // 连接发生错误时的处理函数
      console.log('失败');
      if(this.vm.$message) this.vm.$message({ message: '连接发生错误,请刷新网页再次连接!', type: 'warning' });
    });
  }
  /** 订阅服务端 */
  subscribeToServer() {
    // 订阅服务端提供的某个topic
    this.stompClient.subscribe(`/server/${topic的id}`, (response) => { 
      if (response) {
        if(this.callback) this.callback(response);
      }
    });
  }
    
  /** 赋值、初始化socket */
  initWebSocket(back, me) {
    this.vm = me;
    //列表赋值
    this.callback = back;
    //初始化连接
    this.connectionSocket();
    //加载心跳
    this.heartCheck();
  }

  /** 重连 */
  reconnect() {
    this.destroy();
    if(this.tryTimes > 10) {
      if(this.vm.$message) this.vm.$message({ message: '重连次数已达上限,连接失败。请刷新网页再次连接!', type: 'warning' });
      return;
    }
    this.tryTimes++;
    //再次连接
    this.connectionSocket();
    this.heartCheck();
  }

  /** 心跳检测机制 */
  heartCheck() {
    //先清除重连机制
    if(this.reconTimeout) clearTimeout(this.reconTimeout);
    let me = this;
    me.sendTimeout = setTimeout(() => {
      me.sendSocket({ to: `/server/net/${'自己订阅送的id'}` });
      //重连机制,十秒不被清除代表已经断开,进行重连
      me.reconTimeout = setTimeout(() => {
        me.reconnect();
      }, 10000);
    }, 10000);
  }

  /** 发送消息 */
  sendSocket(params) {
    try {
      this.stompClient.send("/client/path/points", {}, JSON.stringify(params));
    } catch (error) {
      console.log("发生异常了-------", error);
    }
  }

  /** 销毁 */
  destroy() {
    // 断开连接,清除定时器
    if (this.stompClient) this.stompClient.disconnect();
    if (this.reconTimeout) clearTimeout(this.reconTimeout);
    if (this.sendTimeout) clearTimeout(this.sendTimeout);
  }

  /** 获取动态socket地址,http环境下使用http,https环境下使用https访问websocket */
  getSocketUrl() {
    return window.location.protocol + '//' + process.env.VUE_APP_WS_API + process.env.VUE_APP_WS_CTX;
  }
}
const WebSocket = new webSocket();
export default WebSocket;

3、使用

//webSockets类
webSockets.initWebSocket((res) => {
    console.log("推送的消息------", res);
}, this)

4、记得在不用的时候干掉订阅

destroyed() {
  //离开页面,干掉websocket
  webSockets.destroy();
},

总结

    代码中去除了部分的业务逻辑代码,按照需求添加即可。如果是想要一通道多订阅的话,可让后台搞一个动态的topic,给方法内扔一个数组进去,遍历数组,生成多个订阅。

ok,结束,我的愿望是世界和平!文章来源地址https://www.toymoban.com/news/detail-661446.html

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

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

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

相关文章

  • 基于STOMP协议的WebSocket消息代理和相关的安全握手处理器以及消息拦截器

    这段代码是一个Spring配置类 WsChatConfig ,基于STOMP协议的WebSocket消息代理和相关的安全握手处理器以及消息拦截器。这个类通过实现 WebSocketMessageBrokerConfigurer 接口来定义WebSocket通信的路由、安全握手以及消息拦截的逻辑。 核心方法详解 configureMessageBroker(MessageBrokerRegistry confi

    2024年04月26日
    浏览(52)
  • Spring Boot 中的 SockJS

    在 Spring Boot 中, SockJS 是一个用于实现 WebSocket 的兼容性解决方案。本文将介绍 SockJS 的原理、使用方法和示例代码。 SockJS 是一种浏览器与服务器之间的通信协议,它可以在浏览器和服务器之间建立一个基于 HTTP 的双向通信通道。 SockJS 的主要作用是提供一种 WebSocket 的兼容性

    2024年02月12日
    浏览(41)
  • Spring Boot 3 + Vue 3 整合 WebSocket (STOMP协议) 实现广播和点对点实时消息

    🚀 作者主页: 有来技术 🔥 开源项目: youlai-mall 🍃 vue3-element-admin 🍃 youlai-boot 🌺 仓库主页: Gitee 💫 Github 💫 GitCode 💖 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请纠正! WebSocket是一种在Web浏览器与Web服务器之间建立双向通信的协议,而Spring Boot提供了便捷的WebSocket支持

    2024年02月02日
    浏览(48)
  • WebSocket—STOMP详解(官方原版)

    WebSocket协议定义了两种类型的消息(文本和二进制),但其内容未作定义。该协议定义了一种机制,供客户端和服务器协商在WebSocket之上使用的子协议(即更高级别的消息传递协议),以定义各自可以发送何种消息、格式是什么、每个消息的内容等等。子协议的使用是可选的

    2024年02月04日
    浏览(38)
  • HTTP、WebSocket、STOMP、MQTT 协议

    TCP/IP 是用于因特网 (Internet) 的通信协议,是对计算机必须遵守的规则的描述,只有遵守这些规则,计算机之间才能进行通信。 TCP/IP是基于TCP和IP这两个最初的协议之上的不同的通信协议的大集合,是一个协议族。 1-1、TCP(传输控制协议,Transmission Control Protocol) 在计算机网

    2024年04月15日
    浏览(53)
  • SpringBoot + WebSocket+STOMP指定推送消息

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站。 本文将简单的描述SpringBoot + WebSocket+STOMP指定推送消息场景,不包含信息安全加密等,请勿用在生产环境。 JDK:11+ Maven: 3.5+ SpringBoot: 2.6+ stompjs@7.0.0 STOMP 是面向简

    2024年02月14日
    浏览(47)
  • WebSocket的那些事(3-STOMP实操篇)

    上节中我们在 WebSocket的那些事(2-实操篇)中简单介绍了Spring中对于 WebSocket 的封装,并实现一个简单的服务端,这节我们将会结合 STOMP 子协议实现 WebSocket 通信。 WebSocket协议定义了两种消息类型(文本类型和二进制类型),但是消息内容却是未定义的,下面我们介绍一下

    2024年02月07日
    浏览(34)
  • nodej.s 搭建一个socket服务(原生和sockjs)

    新建一个文件夹 建立三个文件(依赖) expressSocketSever.js package-lock.json package.json 3.打开编辑器终端 ,执行 npm i (或者yarn i ),前提是有包管理器npm或者yarn 客户端 服务端 服务地址为: ws://127.0.0.1:8080 端口号占用可以随意换 建立步骤与原生相同,需要依赖,直接在前面建立的文

    2024年02月16日
    浏览(26)
  • flutter开发实战-长链接WebSocket使用stomp协议stomp_dart_client

    flutter开发实战-长链接WebSocket使用stomp协议stomp_dart_client 在app中经常会使用长连接进行消息通信,这里记录一下基于websocket使用stomp协议的使用。 1.1 stomp介绍 stomp,Streaming Text Orientated Message Protocol,是流文本定向消息协议,是一种为MOM(Message Oriented Middleware,面向消息的中间件

    2024年02月13日
    浏览(46)
  • vue4.5脚手架支持IE,提示sockjs错误

    项目组最近反馈vue最新脚手架搭建的项目不支持IE,提示sockjs错误,采用垫片也不好使,   刻意查了下资料,最新脚手架已经不需要配置垫片,只要配置一下transpileDependencies就行, 再vue.config.js添加如下配置即可:一定要两个都配上 效果很OK的 

    2024年02月11日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包