Vue3接入悟空IM实现直播评论互动需求 前端即时通讯 悟空IM连接失败问题 websocket IOS环境 safair浏览器连接失败问题

悟空IM官网
JS文档
官网Demo

之前用websocket实现过跨端发送和接收任务，不算难。
这次的需求复杂些，需要实现直播的评论互动，改用开源的悟空IM。

开发中遇到的坑，学艺不精，卡了两天：
github Issuse

安卓和PC开发环境都可以正常连接，但IOS连接不上，报未知错误。
原因是websocket连接前会先使用http进行一次握手通信，再建立ws常连接。
但在safari浏览器的安全机制下，https环境下的http请求是不被允许的，也就会导致IOS设备无法正常连接。
而安卓使用的浏览器，例如Blink内核的chrome，就无该限制，可以正常连接。

安装

npm i wukongimjssdk

引入

import WKSDK from "wukongimjssdk"

• 通过<script>标签引入使用必须都加前缀 wk, 例如wk.WKSDK.shared()

开发需要的API：

1. 配置

// 集群模式通过此方法获取连接地址
// WKSDK.shared().config.provider.connectAddrCallback = async (callback: ConnectAddrCallback) => {
   
//     const addr = await xxxx // addr 格式为 ip:port
//     callback(addr)
// }

// 单机模式可以直接设置地址
WKSDK.shared().config.addr = 'ws://IP:PORT'; // 默认端口为5200
// 认证信息
WKSDK.shared().config.uid = 'xxxx'; // 用户uid（需要在悟空通讯端注册过）
WKSDK.shared().config.token = 'xxxx'; // 用户token （需要在悟空通讯端注册过）

2. 连接

// 连接
WKSDK.shared().connectManager.connect();

3. 断开

// 断开
WKSDK.shared().connectManager.disconnect();

4. 监听

// 连接状态监听
WKSDK.shared().connectManager.addConnectStatusListener(
  (status: ConnectStatus, reasonCode?: number) => {
   
    if (status === ConnectStatus.Connected) {
   
      console.log('连接成功');
    } else {
   
      console.log('连接失败', reasonCode); //  reasonCode: 2表示认证失败（uid或token错误）
    }
  },
);

5. 消息发送

/**
  *  发送消息
  * @param content  消息内容
  * @param channel 频道对象 个人频道，群频道
  * @returns 完整消息对象
*/
WKSDK.shared().chatManager.send(content: MessageContent, channel: Channel)


// 案例
// 导入 对应的包
import {
    MessageText,Channel,WKSDK,ChannelTypePerson,ChannelTypeGroup } from "wukongimjssdk";

// 例如发送文本消息hello给用户u10001
const text = new MessageText("hello")