websocket+sockjs+stompjs详解及实例

2023年12月12日 370次阅读 来源: 江湖小浪虾

近来有项目需求要用到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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞