SockJS和STOMP

一头代码

于 2025-01-25 19:54:59 发布

阅读量727

点赞数 20

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/gggfJJ/article/details/145358345

版权

在基于 WebSocket 的实时通信中，SockJS 和 STOMP 是两个常用的库，它们的作用如下：

1. SockJS 的作用

SockJS 是一个浏览器端的 JavaScript 库，用于在浏览器和服务器之间建立低延迟、全双工的通信通道。它的主要作用是提供一种 WebSocket 的备选方案，以应对以下情况：

浏览器不支持 WebSocket（例如旧版浏览器）。
网络环境限制了 WebSocket 的使用（例如某些代理或防火墙会阻止 WebSocket 连接）。

SockJS 的特点：

兼容性：SockJS 会优先尝试使用 WebSocket，如果 WebSocket 不可用，则会自动降级为其他通信方式（如 HTTP 长轮询、XHR 流等）。
API 简单：SockJS 提供了类似于 WebSocket 的 API，使用起来非常方便。
跨域支持：SockJS 支持跨域通信。

使用场景：

当你需要确保应用在各种浏览器和网络环境下都能正常建立实时通信时，可以使用 SockJS 作为 WebSocket 的备选方案。

2. STOMP 的作用

STOMP（Simple Text Oriented Messaging Protocol）是一种基于文本的协议，用于在客户端和服务器之间传递消息。它的主要作用是：

提供一种 消息传递的标准化方式，使得客户端和服务器可以通过定义好的消息格式进行通信。
支持 发布/订阅模式 和 点对点模式，适合构建复杂的实时消息系统。

STOMP 的特点：

协议简单：STOMP 协议基于文本，易于理解和调试。
消息格式清晰：STOMP 消息包含命令（如 SEND、SUBSCRIBE）、头部信息和消息体，结构清晰。
与消息代理集成：STOMP 通常与消息代理（如 RabbitMQ、ActiveMQ）一起使用，用于实现消息的路由和分发。

使用场景：

当你需要构建一个基于消息的实时系统（如聊天应用、实时通知系统）时，可以使用 STOMP 来管理消息的发送和接收。

3. SockJS 和 STOMP 的关系

SockJS 负责在浏览器和服务器之间建立通信通道。
STOMP 负责在通信通道上传递结构化消息。

通常情况下，SockJS 和 STOMP 会结合使用：

SockJS 用于建立底层的通信连接（基于 WebSocket 或其他协议）。
STOMP 用于在连接之上定义消息的格式和传递方式。

4. 代码示例

以下是一个结合 SockJS 和 STOMP 的简单示例：

javascript

import { Client } from '@stomp/stompjs'; // 引入 STOMP 客户端
import SockJS from 'sockjs-client'; // 引入 SockJS

// 创建 STOMP 客户端
const client = new Client({
    brokerURL: 'ws://localhost:8080/ws', // WebSocket 地址
    connectHeaders: {
        login: 'user',
        passcode: 'password',
    },
    debug: function (str) {
        console.log('STOMP: ' + str);
    },
    reconnectDelay: 5000, // 重连延迟
    heartbeatIncoming: 4000,
    heartbeatOutgoing: 4000,
});

// 使用 SockJS 作为 WebSocket 的备选方案
client.webSocketFactory = function () {
    return new SockJS('http://localhost:8080/ws');
};

// 连接到服务器
client.activate();

// 订阅消息
client.onConnect = function (frame) {
    console.log('Connected: ' + frame);
    client.subscribe('/topic/messages', function (message) {
        console.log('Received: ' + message.body);
    });
};

// 发送消息
function sendMessage() {
    client.publish({
        destination: '/app/chat',
        body: JSON.stringify({ content: 'Hello, STOMP!' }),
    });
}

// 断开连接
function disconnect() {
    client.deactivate();
    console.log('Disconnected');
}