@stomp/stompjs使用开发通信功能@stomp/stompjs简介 @stomp/stompjs是一个基于Ja

@stomp/stompjs简介

@stomp/stompjs是一个基于JavaScript的客户端库，用于简化WebSocket上STOMP协议的使用。STOMP（Streaming Text Oriented Messaging Protocol）是一种简单且广泛使用的TCP套接字上的消息协议，允许客户端通过标准的帧格式向服务器发送和接收消息。

安装依赖

Vue3项目中安装sockjs-client和@stomp/stompjs：

npm install sockjs-client @stomp/stompjs

使用

封装 socket.ts

import SockJS from "sockjs-client/dist/sockjs.min.js";
import { Stomp, Client } from "@stomp/stompjs";

export function useSocket() {
  const stompClient = ref(null);
  const messageList = ref([]);

  onMounted(() => {
    const socket = new SockJS(`${location.origin}/api/websocket`);
    stompClient.value = Stomp.over(socket);
    stompClient.value.connect(
      { 
        login: 'username',
        password: 'password',
        // 其他自定义headers...
      },
      function (message) {
         clientSubscribe();
      },
      function (err) {
        console.log(err);
      }
    );
  });

  // 订阅主题
  function clientSubscribe() {
    stompClient.value.subscribe("/topic/messages/", onMessageReceived);
  }

  //接收消息
  function onMessageReceived(payload) {
    const receivedMessage  = JSON.parse(payload.body);
     messageList.value.push(receivedMessage);
  }

 //发送消息
  function sendMessage(message: any, callback) {
    if (message && stompClient.value) {
      stompClient.value.send(
        "/app/sendMessage/",
        {},
        JSON.stringify(message)
      );
      callback();
    }
  }

  onUnmounted(() => {
    if (stompClient.value && stompClient.value.connected) {
      stompClient.value.disconnect();
    }
  });
  return {
    messageList,
    sendMessage,
  };
}