websocket+sockjs+stompjs详解及实例(代码片段)

thatme thatme     2023-02-09     406

关键词:

最近有项目需求要用到websocket,刚开始以为很简单,但是随着遇到问题,深入了解,才知道websocket并不是想象中的那么简单,这篇文章主要是考虑websocket在客户端的使用。

1.http与websocket

http超文本传输协议,大家都非常熟悉,http有1.0、1.1、 2.0几个版本,从http1.1起,默认都开启了Keep-Alive,保持连接持续性,简单地说,当一个网页打开完成后,客户端和服务器之间用于传输http数据的TCP连接不会关闭,如果客户端再次访问这个服务器上的网页,会继续使用这一条已经建立的连接,这样就降低了资源的消耗优化性能,但是Keep-Alive也是有时间限制的,还有一个客户端只能主动发起请求才能获取返回数据,并不能主动接收后台推送的数据,websocket便应运而生。

websocket 是 html5
新增加特性之一,目的是浏览器与服务端建立全双工的通信方式,解决 http 请求-响应带来过多的资源消耗,同时对特殊场景应用提供了全新的实现方式,比如聊天、股票交易、游戏等对对实时性要求较高的行业领域。

http与websocket都是基于TCP(传输控制协议)的,websocket可以看做是对http协议的一个补充

2.SockJs

SockJS是一个JavaScript库,为了应对许多浏览器不支持WebSocket协议的问题,设计了备选SockJs。SockJS 是 WebSocket 技术的一种模拟。SockJS会尽可能对应 WebSocket API,但如果WebSocket 技术不可用的话,会自动降为轮询的方式。

3.Stompjs

STOMP—— Simple Text Oriented Message Protocol——面向消息的简单文本协议。
SockJS 为 WebSocket 提供了 备选方案。但无论哪种场景,对于实际应用来说,这种通信形式层级过低。 STOMP协议,来为浏览器 和 server 间的 通信增加适当的消息语义。

4.WebSocket、SockJs、STOMP三者关系

简而言之,WebSocket 是底层协议,SockJS 是WebSocket 的备选方案,也是底层协议,而 STOMP 是基于 WebSocket(SockJS)的上层协议。

1、HTTP协议解决了 web 浏览器发起请求以及 web 服务器响应请求的细节,假设 HTTP 协议 并不存在,只能使用 TCP 套接字来 编写 web 应用。

2、直接使用 WebSocket(SockJS) 就很类似于 使用 TCP 套接字来编写 web 应用,因为没有高层协议,就需要我们定义应用间所发送消息的语义,还需要确保连接的两端都能遵循这些语义;

3、同HTTP在TCP 套接字上添加请求-响应模型层一样,STOMP在WebSocket 之上提供了一个基于帧的线路格式层,用来定义消息语义;

5.使用实例

安装 sockjs-client、stompjs;在这儿要注意一下,我在
"stompjs": "^2.3.3"这个版本发现,引入stompjs会报一个
net模块找不到,需要在stompjs模
块根目录下执行npm install net,这个是个奇葩的问题。
引入模块:


import SockJS from ‘sockjs-client‘;
import Stomp from ‘stompjs‘;

// 连接函数
let number = 1;
function reconnect(socketUrl) 
    let url = `$BASE_URL/ws/sdfpoint`; //连接地址
    // 建立连接对象(还未发起连接)
    let socket = new SockJS(url);
    // 获取 STOMP 子协议的客户端对象
    let stompClient = Stomp.over(socket);
    // 向服务器发起websocket连接并发送CONNECT帧
    stompClient.connect(
        ,//可添加客户端的认证信息
        function connectCallback ()//连接成功的回调函数
            //订阅频道
            stompClient.subscribe(‘/topic/display/control‘, function(data)
                if (data) 
                    console.log(‘subscribe data‘,data);
                
            )
        ,
        function errorCallBack(error)  
        //连接失败时再次调用函数
            number += 1;
            if(number<=10)
                reconnect(url);
            
            console.log(‘error‘,error);
        
    )     

总结:websocket 的实现客户端看起来比较简单,但是需要与后台进行很好的配合和调试才能达到最佳效果。通过SockJS、Stomp来进行浏览器兼容,增加消息语义,增强了可用性。要彻底搞懂websocket,我们还需要深入了解一些底层的原理以及相关的知识。

来源:https://segmentfault.com/a/1190000017204277







使用 Angular 应用程序使用 stompjs 的问题

...发布时间】:2020-01-0614:37:37【问题描述】:这是我想要与websocket通信的应用程序组件ts的代码(为此我安装了sockjs-client和stompjs)。我不知道如何解决这个错误。importComponentfrom\'@angular/core\';im 查看详情

如何在 angular2-webpack 中导入“stompjs/lib/stomp.min”

...我有一个angular2-webpack应用,想要实现stomp、sockjs-client、websocket。已添加"sockjs":"0.3 查看详情

Websocket - sockjs - InvalidStateError:连接尚未建立

】Websocket-sockjs-InvalidStateError:连接尚未建立【英文标题】:Websocket-sockjs-InvalidStateError:Theconnectionhasnotbeenestablishedyet【发布时间】:2018-10-1919:41:21【问题描述】:在Javascript中使用stomp.js和sockjs时,我可以很好地与SpringBoot后端连接... 查看详情

带有 SockJS 连接丢失问题的 Spring Websocket

】带有SockJS连接丢失问题的SpringWebsocket【英文标题】:SpringWebsocketwithSockJSConnectionLostIssue【发布时间】:2019-08-0705:25:11【问题描述】:我正在使用springboot、angularcli和sockjs开发一个Web应用程序。WebSocket实现:@Configuration@EnableWebSocke... 查看详情

RxJS:取消订阅嵌套订阅

...当我在浏览器中打开我的应用程序时,有时它会在连接到websocket之前尝试订阅一些主题。我希望主题订阅等到应用连接到websocket。exportclassSocksService...publicsubscribe< 查看详情

如何使用 spring+stomp+sockjs 获得 websocket 响应

】如何使用spring+stomp+sockjs获得websocket响应【英文标题】:howtogetwebsocketresponsewithspring+stomp+sockjs【发布时间】:2015-01-1908:11:01【问题描述】:我使用spring+stomp向websocket客户端广播消息,但是我怎么知道结果是成功的呢?我使用setSe... 查看详情

是否可以通过 StompJS (ng2Stomp) 通过 websocket 捕获未经授权的错误?

】是否可以通过StompJS(ng2Stomp)通过websocket捕获未经授权的错误?【英文标题】:IsitpossibletocatchunauthorizederrorthroughwebsocketviaStompJS(ng2Stomp)?【发布时间】:2021-03-0917:49:25【问题描述】:我在Angular中使用StompJSng2-stompjs。请求通过JWT身... 查看详情

Spring-Websockets 4.2 中使用 SockJS 的部分消息

】Spring-Websockets4.2中使用SockJS的部分消息【英文标题】:PartialmessageswithSockJSinSpring-Websockets4.2【发布时间】:2016-01-2702:09:33【问题描述】:我正在使用带有SockJS的Spring-Websockets4.2。由于客户端收到的消息可能很大,我想使用部分消... 查看详情

使用 sockjs 踩过套接字无法与 Spring 4 WebSocket 连接

】使用sockjs踩过套接字无法与Spring4WebSocket连接【英文标题】:Stompoversocketusingsockjscan\'tconnectwithSpring4WebSocket【发布时间】:2014-04-2406:02:09【问题描述】:尝试使用Spring4WebSocket和STOMPoversocket使用sockjs。我遇到了一个问题。我的配... 查看详情

Websockets + SockJs:使用 stompclient 时,ConnectCallback 未在客户端执行

】Websockets+SockJs:使用stompclient时,ConnectCallback未在客户端执行【英文标题】:Websockets+SockJs:ConnectCallbacknotexecutingonclientsidewhenusingstompclient【发布时间】:2014-09-2606:52:58【问题描述】:我的问题是:$scope.socket=newSockJS("ws/ws");$scope.st 查看详情

带有 Sockjs 和 Spring 4 但没有 Stomp 的 WebSocket

】带有Sockjs和Spring4但没有Stomp的WebSocket【英文标题】:WebSocketwithSockjs&Spring4butwithoutStomp【发布时间】:2015-01-2507:25:48【问题描述】:有没有办法将WebSockets与SockJS客户端和Spring4服务器一起使用,但不使用STOMP?根据Spring网站上... 查看详情

Spring WebSocket 使用 SockJS 连接到不同的域

】SpringWebSocket使用SockJS连接到不同的域【英文标题】:SpringWebSocketConnectingwithSockJStoadifferentdomain【发布时间】:2015-08-1017:56:57【问题描述】:Spring中的WebSockets是一个相当新的话题,我很想找到更多。我的问题是连接到来自不同域... 查看详情

Spring(Websockets / REST / Security)、JWT 和 Sockjs(Stomp)集成

】Spring(Websockets/REST/Security)、JWT和Sockjs(Stomp)集成【英文标题】:Spring(Websockets/REST/Security),JWTandSockjs(Stomp)integration【发布时间】:2017-08-2314:07:10【问题描述】:我正在开发一个项目并尝试集成:Spring安全性SpringWebsocketsSpringRES... 查看详情

在 SockJS+Spring Websocket 中,convertAndSendToUser 中的“用户”来自哪里?

】在SockJS+SpringWebsocket中,convertAndSendToUser中的“用户”来自哪里?【英文标题】:Where"user"comesfrominconvertAndSendToUserworksinSockJS+SpringWebsocket?【发布时间】:2016-10-1715:33:36【问题描述】:我想了解convertAndSendToUser在SpringSockJS+We... 查看详情

踩 SockJS 错误

...【发布时间】:2016-04-1119:11:30【问题描述】:当sockjs使用websocket协议时,我的应用程序运行良好。但是当它从websockets退回到XHRStreaming时,我在服务器中遇到了错误。22:27:13,340||ERROR|XhrReceivingTransportHandler:|Failedtoreadmessagecom.faste 查看详情

在 websocket 回调中调用 redux-saga 中的 redux 操作(stomp + sockjs)

】在websocket回调中调用redux-saga中的redux操作(stomp+sockjs)【英文标题】:Callreduxactionwithinredux-sagainsidewebsocketcallback(stomp+sockjs)【发布时间】:2020-06-1822:53:36【问题描述】:我在我的项目中使用redux和redux-saga。现在使用WebSocket我在... 查看详情

StompJS javascript客户端在控制台上疯狂记录

】StompJSjavascript客户端在控制台上疯狂记录【英文标题】:StompJSjavascriptclientlogginglikecrazyonconsole【发布时间】:2014-02-1322:42:06【问题描述】:我正在使用StompJSjavascript客户端和SockJS它似乎在chrome开发控制台上记录了每条消息和事... 查看详情

Spring with STOMP over SockJS 和 Tomcat 未升级到 Websockets

】SpringwithSTOMPoverSockJS和Tomcat未升级到Websockets【英文标题】:SpringwithSTOMPoverSockJSandTomcatnotupgradingtoWebsockets【发布时间】:2016-07-2617:13:47【问题描述】:我正在构建一个无状态Spring(4.2.4.RELEASE)解决方案,使用STOMPoverWebsockets和SockJS... 查看详情