@stomp/stompjs使用开发通信功能

@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,
  };
}
​

websocket使用

封装 useWebsocket.ts

// client.ts
export class WebSocketClient {
    private ws: WebSocket | null = null;
    private reconnectAttempts = 0;
    private maxReconnectAttempts = 5;

    constructor(private url: string) {
        console.log(`WebSocketClient: 连接到 ${url}`);
        
    }

    connect(): void {
        try {
            this.ws = new WebSocket(this.url);
            
            this.ws.onopen = () => {
                console.log('连接成功');
                this.reconnectAttempts = 0;
            };

            this.ws.onmessage = (event) => {
                try {
                    const data = JSON.parse(event.data);
                    this.handleMessage(data);
                } catch (error) {
                    console.error('消息解析错误:', error);
                }
            };

            this.ws.onclose = () => {
                console.log('连接关闭');
                this.handleReconnect();
            };

            this.ws.onerror = (error) => {
                console.error('连接错误:', error);
            };

        } catch (error) {
            console.error('连接失败:', error);
        }
    }

    private handleMessage(data: any): void {
        switch (data.type) {
            case 'welcome':
                console.log('服务器:', data.message);
                break;
            case 'message':
                console.log(`${data.from}: ${data.data.message}`);
                break;
            case 'user_joined':
                console.log('系统:', data.message);
                break;
            default:
                console.log('收到消息:', data);
        }
    }

    sendMessage(message: string): void {
        if (this.ws?.readyState === WebSocket.OPEN) {
            this.ws.send(JSON.stringify({
                type: 'chat',
                message: message,
                timestamp: Date.now()
            }));
        }
    }

    private handleReconnect(): void {
        if (this.reconnectAttempts < this.maxReconnectAttempts) {
            this.reconnectAttempts++;
            console.log(`尝试重新连接... (${this.reconnectAttempts}/${this.maxReconnectAttempts})`);
            
            setTimeout(() => {
                this.connect();
            }, 3000);
        }
    }

    disconnect(): void {
        if (this.ws) {
            this.ws.close();
            this.ws = null;
        }
    }
}

连接websocket

import { WebSocketClient } from '@/hooks/useWebsocket';
// 使用示例
const client = new WebSocketClient('ws://localhost:8080');
client.connect();

// 发送消息
setTimeout(() => {
    client.sendMessage('Hello WebSocket!');
}, 1000);