websocket及stomp.js

websocket

服务端(node)

安装nodejs-websocket

npm i nodejs-websocket

编写最基本的服务的代码,可以查看文档https://github.com/sitegui/nodejs-websocket

var ws = require("nodejs-websocket");
console.log("开始建立连接...")

var server = ws.createServer(function (conn) {
  // 这里可以监听文本数据、二进制数据等
  conn.on("text", function (str) {
    console.log("message:" + str)
    conn.sendText("你好，我是服务端");
  })
  conn.on("close", function (code, reason) {
    console.log("关闭连接")
  });
  conn.on("error", function (code, reason) {
    console.log("异常关闭")
  });
}).listen(8001)
console.log("listening on *:8001")

客户端

自html5开始，是本身支持websocket的，所以不需要引入其他第三方库就能直接使用

参考：webSocket 前端如何实现_chuangshaoxia5899的博客-CSDN博客

// 
const ws = new WebSocket('ws://10.10.0.99:8001')
ws.onopen = function () {
  ws.send('你好，我是客户端')
}

ws.onmessage = function (e) {
  console.log("接收到服务端消息" + e.data)
}

ws.onclose = function (e) {
  console.log("服务关闭");
}
ws.onerror = function () {
  console.log("连接出错");
}

stomp.js

从上面的websocket简单使用可以看出，websocket是非常简单的，但是他不能像常规的http访问一样请求接口，我们想要按接口一样请求不同的数据，就需要使用socket.io.js或者stomp.js。

这里我们主要介绍stomp，stomp.js是一个stomp协议的js实现，stomp是一个基于websocket的协议。

stomp官方有比较详细的使用文档：使用 StompJs v5+ - StompJS 系列 (stomp-js.github.io)和简单示例samples/chat.html at master · stomp-js/samples (github.com)

客户端使用

没有找相关的node服务端代码，公司服务端是由java完成的，所以这里就只介绍客户端了

先安装依赖 npm i @stomp/stompjs

import { Client } from '@stomp/stompjs'
mounted () {
    this.initStompData()
}
// stomp实例
let stompClient;

// 连接配置文件
const stompConfig = {
    // Typically login, passcode and vhost
    // 连接头信息，通常是认证登录信息
    connectHeaders: {
        login: "guest",
        passcode: "guest"
    },

    // 连接url，应该以 ws:// or wss:// 开头
    brokerURL: "ws://localhost:15674/ws",

    // debug
    debug: function (str) {
        console.log('STOMP: ' + str);
    },

    // 失败重连时间，200毫秒
    reconnectDelay: 200,

    // Subscriptions should be done inside onConnect as those need to reinstated when the broker reconnects
    // 连接成功的监听，订阅应该在他内部完成
    onConnect: function (frame) {
        // The return object has a method called `unsubscribe`
        // 订阅/topic/chat这个即可，返回的对象有一个unsubscribe的方法
        const subscription = stompClient.subscribe('/topic/chat', function (message) {
            const payload = JSON.parse(message.body);
            // 接收到订阅的消息
        });
    }
}

initStompData(){
    // 创建实例
    stompClient = new Client(stompConfig);
    const payLoad = { user: user, message: message };
    // 向服务端/topic/chat 发送数据，body只支持字符串，所以对象数据需转成字符串发送
    // 当然也可以通过headers发送，支持对象形式
    stompClient.publish({destination: '/topic/chat', body: JSON.stringify(payLoad)});
    // stompClient.publish({destination: '/topic/chat', headers: payLoad});
    
    // 发生错误的监听
    client.onStompError = function(frame) {
      console.info('Broker reported error:' + frame.headers['message']);
      console.info('Additional details:' + frame.body);
    }
    
    // 开启连接
    client.activate()
}