融云im小程序集成初体验

IM即时通讯大神庵 发表了文章 • 0 个评论 • 30 次浏览 • 6 天前 • 来自相关话题

最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧。首先呢,当然是查看官方文档,文档地址如下: https://docs.rongcloud.cn/v4/views/im/noui/guide/p... ...查看全部

最近领导让做一个小程序端的聊天功能,基于多方考虑,最终选择了融云的im来实现,那就先写个demo体验下吧。

微信截图_20210415151418.png

首先呢,当然是查看官方文档,文档地址如下: https://docs.rongcloud.cn/v4/views/im/noui/guide/private/setting/include/mini.html

需要注意要在管理后台的小程序服务下将小程序的开关打开,否则会报错,相关的demo也可从后端下载到。

拿到sdk了,我们就可以上手集成了,嘻嘻……

由于是demo,暂时先把appkey和token配置写死了,放在了config.js中,appkey和token可以从管理后台获取到。

其次呢,我们需要把im引入,可以整一个公用的js文件,在此引入im sdk,初始化一个全局的im对象(在此呢需要注意im对象一定是全局的,不能赋值给小程序里面的data值,之前我就犯了错,赋值给了data,导致页面只要一调用setData方法就一直报Converting string to Json的错误,大家可以在集成过程中避雷呢)。

引入代码如下:

const RongIMLib = require("./RongIMLib-3.0.7-dev.js");
const config = require("../public/config");
const imInstance = RongIMLib.init({ appkey: config.appkey});
export {
  RongIMLib,
  config,
  imInstance
}

接着我们创建一个主页面,在这个页面中我们可以建立融云的连接以及获取会话列表。

connect() { 
    if (this.data.isConnect) {
        this.data.im.disconnect();
    }
    imInstance.connect({ token: config.token }).then(user => {
        this.isConnect = true;
        this.getConversationList();
        console.log('链接成功, 链接用户 id 为: ', user);
    }).catch(error => {
    console.log('链接失败: ', error);
 });
},

注意事项:在此需要注意安全域名问题,要不会报错,导致连接不上融云的服务。

1. 开发环境的话,可以在右上角的详情中的本地设置中将不校验合法域名的地方打上对勾。

2. 生产环境的话,可以参考如下地址设置: https://docs.rongcloud.cn/v4/views/im/noui/guide/private/setting/include/mini.html

这样的话就可以连接成功了,哈哈,第一步总算是跨出去了。

接下来我们可以在连接成功后获取会话列表,代码如下:

imInstance.Conversation.getList().then(list => {
  this.setData({
    conversationList: list
  })
}).catch(error => {
  console.log('获取会话列表失败: ', error);
});

点击详情跳转到聊天页面,在此需要注意如果要获取历史记录的话是要开通im商业版-单群聊云存储的。开通后按照api使用说明获取就可以了,代码如下:

getHistory(conversation) {
    const option = {
        timestrap: +new Date(),
        count: 10
        };
        conversation.getMessages(option).then((result) => { 
            var hasMore = result.hasMore; // 是否还有历史消息可以获取
            this.setData({
              messageList: result.list
            })
        });      
}

接下来发送消息等其他接口,正常调用就可以了,和web端sdk基本是一致的,参考官方文档即可,整个集成过程花了两三天吧,还算顺利。有不足之处还望大家多多指教,多多交流……

融云官网地址:https://www.rongcloud.cn/

融云开发文档地址:https://docs.rongcloud.cn/v4/


集成融云即时通讯碰到的一些问题

IM即时通讯赵炳东 发表了文章 • 0 个评论 • 19 次浏览 • 6 天前 • 来自相关话题

前言公司产品需要新增即时通讯的模块,经过调研后使用融云的即时通讯 SDK 由于以前没有做过相关聊天类的项目,在开发的时候碰到了很多坑,下面会将碰到的问题和解决方案记录下来以做备份和学习交流融云官网:https://www.rongcloud.cn/ ... ...查看全部

前言

公司产品需要新增即时通讯的模块,经过调研后使用融云的即时通讯 SDK 由于以前没有做过相关聊天类的项目,在开发的时候碰到了很多坑,下面会将碰到的问题和解决方案记录下来以做备份和学习交流

融云官网:https://www.rongcloud.cn/ 开发文档:https://docs.rongcloud.cn/v4/

问题列表

1、如何获取历史消息

解决方案: 因为 Web 端没有本地存储,不提供本地获取方法,只能从远端获取 使用获取历史消息方法需要在开发者后台开启 IM 商用版 - 单群聊云存储 服务,服务开通后 30 分钟左右生效 每次最多只能获取 20 条历史消息,通过改变参数 timestrap 来获取其他时间段的历史消息

2、删除会话后还有会话

解决方案: 1、删除会话. 正常来说只要没有收发消息, 会话就不会再生成了 2、如果您有清除 localStorage 的操作, 则 SDK 内部会重新拉取离线消息. 而会话列表是根据收发消息生成的. 则会再次产生会话. 所以建议您检查下是否有清除 localStorage 的操作. 如果有, 建议您只清除自己业务相关的 key 3、如果您换端登录, 则会再次收离线消息, 如果希望此时依然不显示删除的消息. 可以在您删除消息后发一条自定义消息比如: (1). 删除会话 A (2). 发送自定义消息, 标识删除了会话 A (3). 换端登录, 重复收之前已收到过的消息 (4). 收消息时收到了步骤 (2) 中发送的删除标识消息, 根据此自定义消息, 再次调用删除会话方法删除会话

3、怎样才能获取到加入群组之前的聊天记录

解决方案: 加入群组,融云默认是获取不到之前的历史消息,如果想获取到之前的历史消息,需要在开发者后台 -- 免费基础功能 中开通 “新用户获取加入群组前历史消息” 服务,服务开通后 30 分钟左右生效

4、消息中的接收方和发送方 ID 为什么是相同的

解决方案: 如果在接收方来查看消息的话,接收方 id 和 发送方 id 是相同的。 消息体中 targetId 表示会话 id (接收方),senderUserId 表示发送方 id ,messageDirection 表示消息方向,发送: 1,接收: 2 如果 A 给 B 发送一条消息,那么在 B 的角度看的话 targetId 为 A,senderUserId 也是 A,只是 messageDirection 为 2 表示接收 在 A 的角度看的话, targetId 为 B,senderUserId 是 A,只是 messageDirection 为 1 表示发送

5、删除历史消息时,参数与文档描述一致,但是结果却返回 33007 表示:未开通历史消息服务,但是开发者后台早已经开通了

解决方案: 因传入了比融云服务器时间还要大的时间, 所以服务返回了此错误码. 如果要保证删除成功, 建议传入会话最后一条消息的 sentTime (发送时间)

6、接收 emoji 显示不出来

解决方案: 1、Web SDK 接收消息后,消息体内的原生 Emoji 字符会被解码为对应 Unicode 码,需调用转化方法才能正确显示 2、不同浏览器, 不同设备, 展示的原生 Emoji 表情都不同 3、如需多端展示 Emoji 一致, 需使用 emojiToHTML 转化为 HTML 后再展示(此方法为以图片形式展示) 4、emojiToHTML 和 symbolToHTML 仅支持默认的 128 个 emoji. 展示更多, 需自行扩展 详情参考:https://docs.rongcloud.cn/v4/views/im/noui/guide/private/msgmanage/msgsend/web.html#emoji

暂时先记录这些,后续还有的话会继续添加进去,也欢迎大家进行补充,一起学习一下,笔芯 ♥️ ♥️ ♥️ !!!


融云im撤回消息

IM即时通讯赵炳东 发表了文章 • 0 个评论 • 20 次浏览 • 6 天前 • 来自相关话题

由于疫情原因,公司基于融云做了个在线的聊天室,之前增加了一些聊天室的基础功能,最近呢由于需求补充,需要把消息撤回加上。 官方文档说明地址: https://docs.rongcloud.cn/v4/views/im/noui/guide/chatro... ...查看全部

由于疫情原因,公司基于融云做了个在线的聊天室,之前增加了一些聊天室的基础功能,最近呢由于需求补充,需要把消息撤回加上。 官方文档说明地址: https://docs.rongcloud.cn/v4/views/im/noui/guide/chatroom/msgmanage/msgrecall/web.html

撤回消息代码如下:

recall() {
         const conversation = this.im.Conversation.get({
            targetId: this.targetUser.id,
            type: this.targetUser.conversationType
          });
          conversation.recall({
            messageUId: this.currentMsg.messageUId,
            sentTime: this.currentMsg.sentTime
          }).then((message) => {
            this.$message.success('撤回成功');
            const msg =  Object.assign({extra: {nickname: this.currentUser.nickname}}, message);
            this.handleMessage(msg, false);
          });
    },

在此要注意,撤回成功之后是不会触发会话的监听的,需要自己在成功的回调里面处理撤回的消息。撤回消息处理代码如下:

if (message.messageType === 'RC:RcCmd') {
            const msg = Object.assign({tip: `${isSelef ? '您':  nickname}撤回了一条消息`}, message);
            if (messageIds.includes(message.content.messageUId)) {
                const index = messageIds.indexOf(message.content.messageUId);
                this.messageList.splice(index, 1, msg);
            } else {
                this.messageList.push(message);
            }
        } else {
            this.messageList.push(message);
        }

当对方在消息监听中收到上述的消息时,也可以调用上述的方法进行撤回消息处理。

撤回消息现在是没有时间限制的,如果要加上时间限制,可以根据消息的sentTime处理。

至此,消息撤回已成功集成。集成中发现了一个问题,撤回的消息在会话列表中还存在,已经给融云提交工单,看后续能不能处理。

融云官网地址:https://www.rongcloud.cn/

融云开发文档地址:https://docs.rongcloud.cn/v4/


H5 如何实现直播

WebRTC徐凤年 发表了文章 • 0 个评论 • 23 次浏览 • 6 天前 • 来自相关话题

目前直播大火,在看直播后突然想自己做个直播软件。想了想想自己做下,开始在网上各种找资源。直播嘛,那必然有主播端和观众端。经过一系列的考察后后来找到了融云,使用了他们的 SDK,一共用了无 UI IM 和低延时直播两个 SDK。IM 用了连接和发送消息,选择的是... ...查看全部

微信截图_20210415150543.png

目前直播大火,在看直播后突然想自己做个直播软件。想了想想自己做下,开始在网上各种找资源。直播嘛,那必然有主播端和观众端。经过一系列的考察后后来找到了融云,使用了他们的 SDK,一共用了无 UI IM 和低延时直播两个 SDK。

IM 用了连接和发送消息,选择的是融云的聊天室场景。

低延时直播分了主播端和观众端。使用 H5 作为观众端进行观看,使用 web 端作为主播端进行了直播。

功能点介绍

主播端

按照文档的思路,主播端用的 web 界面,使用的 chrome 浏览器。 涉及到的功能点:

  1. 主播分享视频

  2. 查看观众发的消息

  3. 回复消息

观众端

观众端用的 H5 实现,涉及到的功能点:

  1. 观看主播分享的视频

  2. 发消息

  3. 点赞

额,就是为了体验功能做的简单了些,没有弄那些礼物什么的有些麻烦。

实现思路

主播端

  1. 需要先初始化连接 IM,RTC 两个融云的 SDK,此处参考的快速集成 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/quick/premise/web.html

  2. 加入到房间中 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/anchorManage/room/web.html#newroom

  3. 发布视频资源供观众查看 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/anchorManage/resource/web.html#publish

  4. 配置直播 CDN 推流地址 https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/manager/pushcdn/web.html

  5. 完成

此处仅给了我认为关键的几个接口,如果大家感兴趣可以自己细看下文档。有些高级的接口这边没有测试,不过看介绍可以设置直播视频的样式。感兴趣的小伙伴按照文档自行研究下吧。

观众端

观众端就很简单了,H5 的观众端仅需要订阅 CDN 推流的地址就可以看到主播的视频流,很方便。

总结

整体做下来大概零零散散用了两三天,UI 也没怎么最求在网上找了个大致的样式做了下。不过整体还好最起码基本的功能实现了。也算是自己做的第一个直播的小 Demo,还是很欣喜的。喜欢的大家可以体验下。


实现类似微信视频聊天的功能

WebRTC赵炳东 发表了文章 • 0 个评论 • 22 次浏览 • 6 天前 • 来自相关话题

前言今年因为疫情的影响,很多线下的项目或者活动都放在了线上,所以集成音视频等相关的话题一直比较火热。 作为一个小码农对微信音视频通话的功能还是比较好奇的,所以空闲的时候就想着自己能不能也实现一个,给朋友一个链接地址然后就可以愉快的视频通话了(小小的满足一下虚荣... ...查看全部

前言

今年因为疫情的影响,很多线下的项目或者活动都放在了线上,所以集成音视频等相关的话题一直比较火热。 作为一个小码农对微信音视频通话的功能还是比较好奇的,所以空闲的时候就想着自己能不能也实现一个,给朋友一个链接地址然后就可以愉快的视频通话了(小小的满足一下虚荣心)

微信截图_20210415151315.png

对于集成音视频纯小白来说,前期准备工作的确不好整,因为对这块没什么概念,对后面需要做什么列不出一个清晰的步骤出来(蓝廋香菇~~~),幸运的是,在网上找相关知识时意外发现了一家做音视频 SDK 的(融云https://www.rongcloud.cn/

为什么推荐他们家呢,主要是他们的开发文档比较适用于像我这样的小白,跟着他们的快速文档无脑实现音视频通话。点这个地址,开启你的音视频之旅吧:https://docs.rongcloud.cn/v4/views/rtc/call/noui/quick/web.html

特别意外的是融云还提供了 Web 端在线集成体验示例,体验完后还能拿到 demo ,附上跳转连接:https://docs.rongcloud.cn/v4/views/rtc/call/noui/demo/web.html

音视频通话介绍 音视频通话 SDK 含呼叫流程,可以实现一对一呼叫、多人呼叫等音视频通话场景,音视频通话 SDK 区别于音视频会议 SDK,音视频通话(呼叫)SDK 不需要双方约定房间号,呼叫流程自动处理房间号,适用于类似微信音视频通话等必须含有呼叫流程的应用场景,由两部分组成 信令通知 和 音视频传输

信令通知:基于 IMLib SDK,例如 A 给 B 发起通话,A 优先会通过 IM 给 B 发送一个通话请求,B 同意后再进入音视频房间进行音视频通信 音视频传输:基于 RongRTCLib SDK,例如 A 给 B 发起通话,信令传输完成后,会适用融云提供的音视频能力进行通信

但是在集成的时候,有几点是需要吐槽的:

1、我给其他人发起通话的时候,直接就触发挂断了返回 "SummaryMessage" 类型消息,咋又看不懂在文档找了半天都没发现 SummaryMessage 的详细描述,只知道是挂断电话返回的消息,最后提交了工单才了解挂断的原因。

Web 端挂断原因 HungupMessage 消息中 reason 字段及 SummaryMessage 消息中 status 字段都为挂断原因

状态码说明状态码说明
1己方取消已发出的通话请求11对方取消已发出的通话请求
2己方拒绝收到的通话请求12对方拒绝收到的通话请求
3己方挂断13对方挂断
4己方忙碌14对方忙碌
5己方未接听15对方未接听
6己方不支持当前引擎16对方不支持当前引擎
7己方网络错误17对方网络错误
8其他设备已处理18CallLib 不可用

原来是对方忙碌导致的接听失败!!!

2、前段时间还能正常通话,升级完 chrome 后就报错了(一脸懵逼 ),报错信息如下: Failed to execute 'setLocalDescription' on 'RTCPeerConnection': Failed to parse SessionDescription. m=video 9 UDP/TLS/RTP/SAVPF 98 99 96 97 100 101 127 Invalid value:

提供单询问融云的技术人员,才知道是由于 chrome 86 升级了 webRTC 的规范,SDK 在 3.2.6 版本做了相关适配。如果 SDK 使用的不是 3.2.6 版本。需要升级至 3.2.6 版本


融云发送文件和图片消息

IM即时通讯赵炳东 发表了文章 • 0 个评论 • 22 次浏览 • 6 天前 • 来自相关话题

前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。官方文档说明地址如下: https://docs.rongcloud.cn/v4/views/im/noui/gui... ...查看全部

前段时间集成了web端融云的聊天功能,但是只能发送普通消息,最近产品经理出了新需求,需要把文件发送和图片发送加上,那就撸起袖子走一遍。

微信截图_20210415151151.png

官方文档说明地址如下: https://docs.rongcloud.cn/v4/views/im/noui/guide/group/msgmanage/msgsend/web.html

看过文档之后,才发现发送文件和图片消息是分两步的,首先要实现文件和图片的上传,然后拿到数据后发送消息。融云默认是存储到七牛服务器的,其实也可以上传到自己的服务器,由于是个demo,我暂时就存储到七牛啦。

文件和图片上传

demo地址:https://github.com/rongcloud/rongcloud-web-im-upload,用到的文件可以从以上demo地址中拿到。

上传暂时还不支持npm的引如方式,需要在html中引入上截图中的三个文件,顺序如下:

<script src = "./send-data.js"></script>
<script src = "../upload.js"></script>
<script src="./init.js"></script>

然后在input的change事件中,触发以下方法:

 fileChange(evt, type) {
        this.currentType = type === 'img' ? RongIMLib.FileType.IMAGE : RongIMLib.FileType.FILE;
        const file = evt.target.files[0];
        console.log('file', file);
        if (type === 'img') {
            UploadClient.initImage(this.config, (uploadFile) => { // 上传文件为: UploadClient.initFile
                uploadFile.upload(file, this.uploadCallbacks);
            });
        } else {
            UploadClient.initFile(this.config, (uploadFile) => { 
                uploadFile.upload(file, this.uploadCallbacks);
            });
        }

    },

config配置如下:

config() {
        return {
            domain: 'http://upload.qiniu.com',
            fileType: this.currentType,
            getToken: (callback) => {
                this.rongIMClient.getFileToken(this.currentType , {
                onSuccess: (data) => {
                    callback(data.token);
                },
                onError: () => {
                    console.error('get file token error', error);
                }
                });
            }
        }
    },

成功回调配置如下:

uploadCallbacks() {
        return {
            onProgress: (loaded, total) => {
                const percent = Math.floor(loaded / total * 100);
                console.log('已上传: ', percent);
              },
              onCompleted: (data) => {
                  this.currentFile = data;
                  this.getFileUrl(data);
              },
              onError: (error) => {
                console.error('上传失败', error);
              }
        }
    },

注:如果是图片的话在onCompleted里面通过data.thumbnail是可以拿到图片的缩略图的。 接下来是获取文件或者图片的url,也需要在onComplete回调中获取,代码如下:

   getFileUrl(data) {
        if (data.thumbnail) {
           this.currentFile.base64 = `data:image/jpg;base64,${data.thumbnail`;
        }    
        this.rongIMClient.getFileUrl(this.currentType, data.filename, data.name, {
        onSuccess: (data) => {
            this.currentFile = Object.assign(this.currentFile, data);
            this.sendFileMessage(this.currentType);
            console.log('文件 url 为: ', data);
        },
        onError: function(error) {
            console.log('get file url error', error);
        }
        })
    },

拿到文件或者图片的url之后就可以发送图片或者文件消息了。

文件和图片消息发送

发消息代码如下:

  sendFileMessage(type) {
        let msg = {};
        if (type ===  RongIMLib.FileType.IMAGE) {
            msg = new RongIMLib.ImageMessage({content:  this.currentFile.base64, imageUri: this.currentFile.downloadUrl});
        } else {
            msg = new RongIMLib.FileMessage({name:  this.currentFile.name, size: this.currentFile.size, type: this.currentFile.type, fileUrl: this.currentFile.downloadUrl});
        }
        var conversationType = this.targetUser.conversationType;
        var targetId = this.targetUser.id;  // 目标 Id
        var callback = {
        onSuccess:  (message) => {
            this.handleMessage(message);
        },
        onError:  (errorCode) => {
        }
        };
        this.rongIMClient.sendMessage(conversationType, targetId, msg, callback);
    },

至此,发送图片和文件消息完成,整体算是顺利……

融云官网地址:https://www.rongcloud.cn/


成为主播的必备神器

WebRTC徐凤年 发表了文章 • 0 个评论 • 16 次浏览 • 6 天前 • 来自相关话题

前言本人是一个游戏爱好者,经常会在斗鱼或者虎牙看游戏主播的精彩操作,特别是近几年直播的火速崛起,各个平台都打着人人都可以成为主播的口号来获取直播流量,所以我就在想直播门槛这么低的吗!这个疑问直到我看到 融云的低延迟直播 SDK 才打消了。那... ...查看全部

前言

本人是一个游戏爱好者,经常会在斗鱼或者虎牙看游戏主播的精彩操作,特别是近几年直播的火速崛起,各个平台都打着人人都可以成为主播的口号来获取直播流量,所以我就在想直播门槛这么低的吗!这个疑问直到我看到 融云的低延迟直播 SDK 才打消了。

微信截图_20210415150703.png

那么这个低延迟直播 SDK 是什么呢?

工欲善其事,必先利其器!那么这个低延迟直播就是成为主播之路的神器。下面是介绍:

低延迟直播 SDK 可以满足 1 个或多个主播与百万观众实时互动,避免延迟带来的距离感,增加用户活跃,支持主播推流,观众拉流,连麦互动等功能,为方便开发者集成降低集成难度,直播场景和会议场景都用 RongRTCLib SDK ,可在 SDK 调用时用参数加以区分集成场景

也就是说通过集成 低延迟直播 SDK 我们可以自己实现一个主播平台,集成的方式也非常简单,快速集成分三个步骤:

1、首先您需要了解集成的前置条件https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/quick/premise/web.html

2、完成前置条件后,开始实现主播端发布音视频流的操作:https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/quick/anchor/web.html

3、有了主播后,咋们也不能忘记观众端,观众端就比较简单了,只需要订阅主播端发布成功的音视频资源就可以了:https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/quick/audience/web.html

完成上面三个步骤后,您就已经初步集成完 低延迟直播 SDK 了,主播和观众就可以互通了,是不是很简单!如果您觉得集成比较麻烦,OK !还有一个 Web 在线集成体验的示例,体验完后还可以直接拿到 demo ,跳转地址:https://docs.rongcloud.cn/v4/views/rtc/livevideo/guide/demo/web.html

如果您还想进阶更高级一点的,需要好好研究一下文档当中的其他功能,比如:

发布文件资源:Web 可以通过拿到本地音频、视频文件资源,进行发布。代码示例:

// 通过 video 标签播放本地音视频资源。
let videoNode = document.querySelector('#target');
let mediaStream = videoNode.captureStream();
let user = {
  id: '请填写用户 ID',
  stream: {    
    tag: 'custom',
    type: StreamType.AUDIO_AND_VIDEO,
    mediaStream: mediaStream
  }
};
stream.publish(user).then(() => {
  console.log('发布成功');
}, error => {
  console.log(error);
});

发布屏幕共享资源:Web 可以通过 stream.get 方法获取屏幕媒体流。 仅支持 Chrome 获取屏幕共享资源。代码示例:

var config = {
  height:480,
  width:640,
  frameRate:15,
  screen: true,
  desktopStreamId: 'desktopStreamId',
}

stream.get(config).then(function ({ mediaStream }) {
  let user = {
    id: '请填写用户 ID',
    stream: {    
      tag: 'screen',
      type: StreamType.AUDIO_AND_VIDEO,
      mediaStream: mediaStream
    }
  }
  stream.publish(user).then(() => {
    console.log('发布成功');
  }, error => {
    console.log(error);
  });
}, error => {
  console.error(error);
});

等等······还有好多扩展功能等您来发现!授人以鱼,不如授人以渔,哈哈哈,我们不仅能自己成为主播,还能创造主播,还等什么呢,赶紧试一下吧


快速了解 Electron:基于 Web 跨平台桌面实现 - 即时通讯

IM即时通讯徐凤年 发表了文章 • 0 个评论 • 22 次浏览 • 6 天前 • 来自相关话题

Electron 知识普及目前市面上的通讯软件多数都是支持多种平台的,Android 端、iOS 端、PC 端、Web 端、小程序端等。由于传统的 PC 端开发成本很高。所以今天给大家推荐使用 Electron 来实现 PC 端。Electron 是通过将 C... ...查看全部

Electron 知识普及

目前市面上的通讯软件多数都是支持多种平台的,Android 端、iOS 端、PC 端、Web 端、小程序端等。由于传统的 PC 端开发成本很高。所以今天给大家推荐使用 Electron 来实现 PC 端。

Electron 是通过将 Chromium 和 Node.js 合并到同一个运行时环境中,可以用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序。

Electron 可以将开发好的程序打包成 Mac、Windows 和 Linux 系统。

Electron 官网 https://www.electronjs.org/

Electron 开发 PC 端的理由

  1. 使用 Web 技术进行开发,开发成本低,可扩展性强;

  2. 跨平台,一套代码可打包为 Windows、Linux、Mac 三套软件;

  3. 可直接在现有 Web 应用上进行扩展;

  4. 提供浏览器不具备的能力;

实现即时通讯

传统 web 端通信多数都是由 websock 或者是长轮询实现的。目前市面上也有很多做即时通讯的三方,例如:融云,网易云等等。我选择的是融云。

融云提供了一个桌面端解决方案,是使用 Electron 实现。不过个人觉得那个版本有些低,但还是试用了下。

下载 Demo 启动起来,Demo 里面给的很简单不过基本的功能还是有的,把 Demo 中的地址换成了我自己的地址还是比较方便的。

此处省略了些实现过程,Electron 使用的是融云提供的 Demo, web 站点是之前集成的融云的 web 端 SDK。 如果大家想要了解可以先看下文档,由于项目中有很多其他模块内容就不再次展示了。

文档地址 https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html

由于我们场景就是单群聊,所以用到的核心接口如下。

  1. 初始化连接https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#init

  2. 设置监听https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#listener

  3. 连接融云https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#connect

  4. 发消息https://docs.rongcloud.cn/v4/views/im/noui/guide/quick/include/web.html#send

当时测试时直接用的快速集成中的代码段进行了下修改。还是很方便的。如果需要大家可以自行查看。

结果上图

24954647-5f7d3bbb34d7d453.png

融云实时语音通话

IM即时通讯admin 回复了问题 • 2 人关注 • 1 个回复 • 38 次浏览 • 2021-04-09 09:49 • 来自相关话题

【社区活动】欢迎提交你的开源项目

好玩创意admin 发表了文章 • 0 个评论 • 62 次浏览 • 2021-04-06 16:56 • 来自相关话题

为了回馈社区用户长期以来的支持,营造良好的社区技术氛围,鼓励更多开发者交流技术心得、分享技术实操方法及经验,创作更多优秀内容。特面向所有社区注册用户开展征集开源项目活动。活动时间投稿时间:长期有效面向对象Geek Online 社区所有注册用户内容要... ...查看全部

微信截图_20210406165405.png

为了回馈社区用户长期以来的支持,营造良好的社区技术氛围,鼓励更多开发者交流技术心得、分享技术实操方法及经验,创作更多优秀内容。特面向所有社区注册用户开展征集开源项目活动。

活动时间

投稿时间:长期有效

面向对象

Geek Online 社区所有注册用户

内容要求

1、融云产品相关,选题包括:集成 IM 或 RTC 的开源项目;

2、可以解决现实生活中现实存在的一个问题的开源项目。

投稿规则

1、在本篇文章直接回复项目名称+源码地址

2、投稿人社区账号头像、昵称、个人介绍需资料完善

3、稿件投递后 个工作日内完成初审,并通过社区消息、邮箱通知。

奖励

1、开源项目一经收录,即可获得 Geek Online 加油包 1 份(内容发布 7 个工作日内发出);

2还可根据代码质量给予优秀稿件 200-1000 元京东购物卡奖励,并在社区公示;

3、经编辑审核后,将安排在不限于公众号、社群及网媒中推广;

4、作者有机会加入社区特邀专栏作者计划,获得更高现金激励,并受邀参与融云各类开发者活动(线下/线上)

声明

1、在法律允许范围内,活动最终解释权归 Geek Online 社区所有。

2、对于作者发布非原创内容或有争议内容所引起的一切后果,均由作者承担。欢迎社区用户举报,一经查实,作废处理。


友情链接