web-message

787字约3分钟

2023-12-06

简介

Web消息通讯，使用场景心态检查、站内消息、服务器事件通知等，常用技术有短轮询、长轮询、WebSocket、MQTT、STOMP。下面我们分别介绍几种消息的实现方案。

它是一个基于TCP IP 协议、可提供发布／订阅消息模式、十分轻量级的通信协议。除标准版外，还有个简化版本MQTT SN ，它基于非 TCP IP 协议（如 ZigBee 协议），该协议主要为嵌入式设备提供消息通信。这里主要介绍标准版 MQTT 3.1.1 ，该协议是一个基于客户端－服务器的消息发布／订阅传输协议，其特点是轻量、简单、开放和易于实现。正因为这些特点，使它常应用于很多机器计算能力有限、低带宽、网络不可的远程通信应用场景中。

MQTT各种语言基础Demo:https://github.com/emqx/MQTT-Client-Examples

import mqtt from 'mqtt'
// 默认/,不支持修改
let vhost = '/'
let topic = 'mytestTopic'
let client = mqtt.connect(mqttSet.server, { username: 'user', password: 'passwd' })
if(client.on){
    // 连接成功
    client.on("connect", () => {
        console.log('Connection succeeded!')
        subscribe()
    })
    
    client.on('reconnect', () => {
        console.log('reconnect!')
    })
    
    client.on('error', error => {
        console.log('Connection failed', error)
    })
    
    client.on('message', (topic, message) => {
        console.log(`Received message ${message} from topic ${topic}`)
    })
}

// 订阅消息
function subscribe(){
    client.subscribe(topic, { qos:0 }, (error, res) => {
       if (error) {
            console.log('Subscribe to topics error', error)
            return
       }
       this.subscribeSuccess = true
       console.log('Subscribe to topics res', res)
    })
}

// 取消订阅
function unsubscribe(){
    client.unsubscribe(topic)
    client.end(true)
}
// 发送消息
function sendMessage(){
    client.publish(topic, 'message content...')
}

RabbitMQ STOMP实现

STOMP ( Streaming Text Orientated Messaging Protocol 流文本定向消息协议〉是个简单的文本消息传输协议，它提供了种可互操作的连接格式，允许客户端与任意消息服务器 Broker ）进行交互如下都 STOMP 协议的服务器端实现。

import Stomp from 'stompjs'

let vhost = '/'
let client = Stomp.client('ws://192.168.10.37:15674/ws')
// 定义订阅主题id，后续取消订阅时使用，不指定会自动生成
let headers = {id: 'messageSubId'}

client.connect('userName','password',successCallback, errorCallback, vhost)
// 关闭debug日志
client.debug = false

// 连接成功回调函数
function successCallback(){
    let destination = '/exchange/amq.topic/mytestTopic'
    
    
    let onMessage = (msg) => {
        console.log('收到消息：',msg.body)
    }
    // 订阅消息
    client.subscribe(destination, onMessage, headers)
}

//连接失败回调函数
function errorCallback(error){
    console.log('连接异常！', error)
}
// 取消订阅
function unsubstribe(subId){
    //subId 订阅时指定的id
    client.unsubscribe(subId)
    client.disconnect()
}
// 发送消息
function sendMessage(){
    client.send(topic, headers, '消息：' + message)
}

WebSocket 实现

WebSocket 是一种网络传输协议，可在单个 TCP 连接上进行全双工通信，位于 OSI 模型的应用层。WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。

参考资料：

WebSocke详解

在vue中使用SockJS实现

Spring Boot 集成 WebSocket

let server= 'ws://localhost:8098/api/ws/4444'
// 创建连接
client = new WebSocket(server)
// 连接成功
client.onopen = function (op) {
    client.send('发送消息：hehehe..')
}
// 收到消息
client.onmessage = function (msg) {
    console.log('收到消息：',msg.data)
}
// 出现异常
client.onerror = function (err) {
    console.error('遇到异常：',err)
}

web-message

简介

RabbitMQ MQTT 实现

RabbitMQ STOMP实现

WebSocket 实现