vue2中使用sockjs发送消息

在 Vue2 中使用 SockJS 发送消息需要先安装 SockJS 和 StompJS 两个库，可以使用 npm 安装：

npm install sockjs-client stompjs --save

安装完成后，可以在 Vue 组件中引入 SockJS 和 StompJS，并创建 SockJS 实例：

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

let sock = new SockJS('http://localhost:8080/ws');
let stompClient = Stomp.over(sock);

其中 `http://localhost:8080/ws` 是 WebSocket 的地址，根据实际情况进行修改。

接下来就可以使用 `stompClient.send()` 方法发送消息了，例如：

stompClient.send('/app/sendMessage', {}, JSON.stringify({
    sender: 'user1',
    recipient: 'user2',
    content: 'Hello World!'
}));

其中第一个参数为目标地址，第三个参数为消息内容，可以根据实际情况进行修改。第二个参数为消息头，可以为空。

完整的示例代码：

import SockJS from 'sockjs-client';
import Stomp from 'stompjs';

export default {
    data() {
        return {
            messages: [], // 存储接收到的消息
            stompClient: null // SockJS 实例
        }
    },
    mounted() {
        this.initWebSocket();
    },
    methods: {
        initWebSocket() {
            let sock = new SockJS('http://localhost:8080/ws');
            this.stompClient = Stomp.over(sock);
            this.stompClient.connect({}, (frame) => {
                console.log('Connected: ' + frame);
                this.stompClient.subscribe('/user/topic/receiveMessage', (response) => {
                    let message = JSON.parse(response.body);
                    this.messages.push(message);
                });
            });
        },
        sendMessage() {
            this.stompClient.send('/app/sendMessage', {}, JSON.stringify({
                sender: 'user1',
                recipient: 'user2',
                content: 'Hello World!'
            }));
        }
    }
}