心跳起搏器--stomp.js

应用场景 stomp官网地址

当我们需要不间断的给服务器发请求的时候一般有两种解决方案，一种是平时的http做轮询去请求，还有一种是使用webSocket来解决，轮询虽然可以解决双向通讯的问题，但是也有一些他本身的缺点，轮询间隔大了则信息不够实时，轮询间隔过小又会消耗过多的流量，增加服务器的负担。所以我们可以适当的去研究运用一下webSocket，这个时候就可以使用stomp.js这个库了

引入方式

    npm i @stomp/stompjs

或者

    <https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js>
    <https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.js>

使用 Client

    import { Client, Message } from '@stomp/stompjs';

最简单的使用方式

    const client = new StompJs.Client();
    client.brokerURL = 'ws://localhost:15674/ws';
    console.log(client.brokerURL);

或者创建一个client

    const client = new StompJs.Client({
      brokerURL: 'ws://localhost:15674/ws',
      connectHeaders: {
        login: 'user',
        passcode: 'password',
      },
      reconnectDelay: 5000, // 重连时间
      heartbeatIncoming: 4000, // 进入时间
      heartbeatOutgoing: 4000, // 退出时间
    });

    client.onConnect = function (frame) {
      // 可以在链接成功以后去订阅消息
    };

    };

    client.activate(); // 启动websocket

停止链接 deactivate

    client.deactivate();

发送消息 publish

    client.publish({
      destination: '/topic/general',
      body: 'Hello world',
      headers: { priority: '9' },
    });

订阅消息(一般在onConnect中使用) subscribe

    const subscription = client.subscribe('/queue/test', callback);

订阅以后只要有消息就可以在callback会调中获取到服务器发送回来的消息

    callback = function (message) {
        console.log(message)
    };

当然也可以在订阅方法中传header，传入第三个参数

    const headers = { ack: 'client' };
    client.subscribe('/queue/test', message_callback, headers);

取消订阅 unsubscribe

    subscription.unsubscribe();

效果

我们只需要打开F12，观察socket通讯就完成我们的工作啦

完