uni-app app的websocket即时通信模板

发布于 1周前 作者 gougou168 来自 Uni-App

uni-app app的websocket即时通信模板

哪位大神可以做个uni-app app项目的websocket即时通信模板

Harmonyos Next教程
7 回复

https://www.cnblogs.com/xiaoyan2017/p/11645467.html


顺路请教一下，当推送下达到（比如IOS）客户端，如果用户没有在线（未触发 receive），也没有点击通知（未触发click），而是直接打开了APP，是不是这时没有办法获取到下达的透传消息呢？（或者客户端是否可能在不请求服务器的情况下获取到推送下达的消息呢？）

回复 蒙多塞冬: 发现和我推送的 content-available 有关。

Dcloud插件市场里已经有了你想要的插件：https://ext.dcloud.net.cn/plugin?id=1334

单聊、群聊、在线客服都有 https://ext.dcloud.net.cn/plugin?id=1488

在uniapp插件市场发现一款挺不错的websocket插件，支持uniapp、小程序这些，用起来稳定性和实时性都不错，还具备自动重连、心跳机制，是一个比较不错的解决方案。地址：https://ext.dcloud.net.cn/plugin?id=1334

当然，以下是一个基于uni-app的WebSocket即时通信模板代码示例。这个示例展示了如何在uni-app项目中建立WebSocket连接，并处理消息接收和发送。

首先，确保你的uni-app项目已经创建并运行。

1. 在pages/index/index.vue中编写WebSocket代码

<template>
  <view class="content">
    <text>{{ message }}</text>
    <input type="text" v-model="inputMessage" placeholder="输入消息" />
    <button @click="sendMessage">发送消息</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      socketOpen: false,
      ws: null,
      message: '',
      inputMessage: ''
    };
  },
  onLoad() {
    this.initWebSocket();
  },
  methods: {
    initWebSocket() {
      this.ws = uni.connectSocket({
        url: 'wss://your-websocket-server-url', // 替换为你的WebSocket服务器URL
        success: (res) => {
          console.log('WebSocket连接成功', res);
          this.socketOpen = true;
        },
        fail: (err) => {
          console.error('WebSocket连接失败', err);
        }
      });

      // 监听WebSocket打开事件
      this.ws.onOpen((res) => {
        console.log('WebSocket已打开', res);
      });

      // 监听WebSocket消息事件
      this.ws.onMessage((message) => {
        console.log('收到服务器内容：', message.data);
        this.message += message.data + '\n';
      });

      // 监听WebSocket错误事件
      this.ws.onError((err) => {
        console.error('WebSocket错误：', err);
      });

      // 监听WebSocket关闭事件
      this.ws.onClose((res) => {
        console.log('WebSocket已关闭', res);
        this.socketOpen = false;
      });
    },
    sendMessage() {
      if (this.socketOpen && this.ws && this.inputMessage) {
        this.ws.send({
          data: this.inputMessage
        });
        this.inputMessage = '';
      } else {
        uni.showToast({
          title: 'WebSocket未连接或消息为空',
          icon: 'none'
        });
      }
    }
  },
  onUnload() {
    if (this.ws) {
      this.ws.close();
    }
  }
};
</script>

<style>
.content {
  padding: 20px;
}
</style>

2. 注意事项

  • 确保你的WebSocket服务器URL正确，并且服务器支持WebSocket协议。
  • uni.connectSocket用于创建WebSocket连接。
  • this.ws.onOpen、this.ws.onMessage、this.ws.onError、this.ws.onClose分别用于监听WebSocket的不同事件。
  • this.ws.send用于发送消息到WebSocket服务器。
  • 在页面卸载时（如用户关闭页面），调用this.ws.close()关闭WebSocket连接。

这个模板提供了一个基本的WebSocket即时通信框架，你可以根据实际需求进行扩展和优化。

回到顶部