当前位置: 首页 > article >正文

SSE与WebSocket与MQTT

SSE

<template>
  <div>
    <h1>实时消息</h1>
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const messages = ref([]);  // 存储接收到的消息
let eventSource;

onMounted(() => {
  // 创建 SSE 连接
  eventSource = new EventSource('https://example.com/sse-endpoint');

  // 监听消息事件
  eventSource.onmessage = (event) => {
    messages.value.push(event.data);  // 将新消息推入列表
  };

  // 监听错误事件
  eventSource.onerror = (error) => {
    console.error('SSE 连接错误:', error);
    eventSource.close();  // 出现错误时可以选择关闭连接
  };
});

onUnmounted(() => {
  // 组件卸载时关闭 SSE 连接
  if (eventSource) {
    eventSource.close();
  }
});
</script>

WebSocket

<template>
  <div>
    <h1>实时聊天</h1>
    <input v-model="newMessage" @keydown.enter="sendMessage" placeholder="输入消息" />
    <ul>
      <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const messages = ref([]);    // 存储接收到的消息
const newMessage = ref('');   // 存储输入框的消息内容
let socket;

onMounted(() => {
  // 创建 WebSocket 连接
  socket = new WebSocket('wss://example.com/socket-endpoint');

  // 监听消息事件
  socket.onmessage = (event) => {
    messages.value.push(event.data);  // 将接收到的消息添加到列表中
  };

  // 监听错误事件
  socket.onerror = (error) => {
    console.error('WebSocket 错误:', error);
  };

  // 监听 WebSocket 连接关闭
  socket.onclose = () => {
    console.log('WebSocket 连接已关闭');
  };
});

onUnmounted(() => {
  // 组件卸载时关闭 WebSocket 连接
  if (socket) {
    socket.close();
  }
});

// 发送消息
const sendMessage = () => {
  if (newMessage.value) {
    socket.send(newMessage.value);  // 发送消息到服务器
    newMessage.value = '';  // 清空输入框
  }
};
</script>

MQTT

// src/mqttService.js
import mqtt from 'mqtt';

let client;

export const connectMQTT = () => {
  client = mqtt.connect('wss://broker.hivemq.com:8000/mqtt');  // 替换为你的 MQTT 代理地址
  
  client.on('connect', () => {
    console.log('MQTT connected');
    client.subscribe('test/topic', (err) => {
      if (!err) {
        console.log('Subscribed to test/topic');
      }
    });
  });

  client.on('message', (topic, message) => {
    console.log(`Received message: ${message.toString()} from topic: ${topic}`);
  });
};

export const publishMessage = (topic, message) => {
  if (client && client.connected) {
    client.publish(topic, message);
    console.log(`Message sent: ${message} to topic: ${topic}`);
  }
};

export const disconnectMQTT = () => {
  if (client) {
    client.end();
    console.log('MQTT disconnected');
  }
};
<template>
  <div>
    <h1>Vue 3 with MQTT</h1>
    <button @click="sendMessage">Send Message</button>
    <p>Message: {{ receivedMessage }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import { connectMQTT, publishMessage, disconnectMQTT } from './mqttService';

const receivedMessage = ref('');

const sendMessage = () => {
  publishMessage('test/topic', 'Hello from Vue 3!');
};

onMounted(() => {
  connectMQTT();
});

onBeforeUnmount(() => {
  disconnectMQTT();
});

// 订阅消息并更新界面
import { watchEffect } from 'vue';
watchEffect(() => {
  // 这里可以根据接收到的消息更新UI
  // 对接收到的消息进行处理
  receivedMessage.value = 'Waiting for messages...';
});
</script>

<style scoped>
button {
  padding: 10px;
  font-size: 16px;
  margin-top: 20px;
}
</style>


http://www.kler.cn/a/391306.html

相关文章:

  • Kafka - 启用安全通信和认证机制_SSL + SASL
  • Kubernetes在容器编排中的应用
  • 弹性盒子布局(Flexbox)详细介绍
  • 【数理哲学】决定论与混沌理论
  • Linux下MySQL的简单使用
  • luckfox-pico-max学习记录
  • STM32WB55RG开发(3)----生成 BLE 程序连接手机APP
  • Linux开发讲课49--- Linux 启动过程分析
  • 刘铁猛C#入门 024 类的声明,继承和访问控制
  • 微澜:用 OceanBase 搭建基于知识图谱的实时资讯流的应用实践
  • Nebula NGQL语言的使用 一
  • LabVIEW 实现 find_nearest_neighbors 功能(二维平面上的最近邻查找)
  • vue-h5:在h5中实现相机拍照加上身份证人相框和国徽框
  • 智能科技赋能金融决策:中阳科技的数据分析解决方案
  • [免费]SpringBoot+Vue3校园宿舍管理系统(优质版)【论文+源码+SQL脚本】
  • vue3 富文本组件(MDEditor)在拖拽组件(vuedraggable)点击功能失效问题
  • Python 操作 Neo4J,Python 库 Py2Neo
  • (三)【 Python最牛 -Basemap】使用Basemap进行地图可视化
  • 项目管理人员的自我评估与职业目标设定
  • Knife4j调试全局对象参数自动化
  • A算法详解(go实现)
  • 【服务器】本地安装X11 服务器-Windows
  • 【学习】【HTML】HTML、XML、XHTML
  • Spring Boot编程训练系统:核心特性与实现策略
  • 《JVM第10课》内存溢出(OOM)排查过程
  • Rust 生态系统的未来与学习方向