Django 做后端,Vue前端,通过使用融云制作聊天功能

最近做聊天功能,开始想自己写聊天的逻辑,做了一半发现没有自己想的简单。对于聊天功能,我认为是有难度,抛开各种协议外,如何数据绑定(你发送的时候能实时显示在聊天界面中),如何通知对方显示你发送的消息,如何做到实时显示对方消息。

这些对于开发老手很好解释,如果你开始自己写代码,是否也有这种疑惑。综合经历,讲一讲自己的体会。

使用Django做后端,vue 做前端是真个项目的需要,并没有特殊之处,这里介绍环境,然后展开说明使用融云开发的注意事项。

第一:注册融云并开启历史聊天功能。

注册简单,需要注意的时候,如果使用历史消息,这里必须如下开启功能

IM服务》高级功能设置中看到如下图片

在单群聊消息云储存下,开发环境开启功能(生产环境是需要人民币的)。

如果不开启,调用历史消息是不可能成功的,调用历史消息代码如下:

constthat =this

letconversationType = RongIMLib.ConversationType.PRIVATE;//单聊,其他会话选择相应的消息类型即可。

lettargetId ="oP04a0rXkOx5W01S1WMjXx5kkJWc";// 想获取自己和谁的历史消息,targetId 赋值为对方的 Id。

lettimestrap =null;// 默认传 null,若从头开始获取历史消息,请赋值为 0 ,timestrap = 0;

letcount =20;// 每次获取的历史消息条数,范围 0-20 条,可以多次获取。

RongIMLib.RongIMClient.getInstance().getHistoryMessages(conversationType,targetId,timestrap,count,{

onSuccess:function(list,hasMsg) {

if(list &&list.length>){

that.msgContent = list

console.log(list)

}

},

onError:function(error) {

console.log("GetHistoryMessages,errorcode:"+ error);

}

});

这些方法都是写在vue 下的methods中。

第二:如何显示历史消息并且将自己输入对话框的内容显示到聊天界面

方便使用vue的数据绑定就行了,这里讲一下如何将历史消息和新发的消息一起显示出来。如下:

letcallbacks = {

sendMessage(message) {

console.log('自己发送的消息:'+ message)

// 将自己发送的信息push到历史消息中,这样实现数据驱动,现在历史消息是object

lethistory = that.msgContent

console.log(history)

console.log(message)

that.msgContent = history.concat(message)

console.log(that.msgContent)

}

}

utils.sendTextMsg(conversationtype,targetId,msg,callbacks)

就是将history的追加,由于数据绑定就自然而然能显示出来,这里需要注意的是,历史消息与新发消息的数据格式要正确。

图中,使用callbacks回调,这样做好处很多,可参考。

我觉得需要跳过的坑就这几个,有疑问可留言交流。

另一篇文章讲讲如何调试本地应用,尤其是微信授权开发。

参考文档:

融云 开源项目索引 https://www.rongcloud.cn/docs/open_source.html

Vue 中如何引入第三方 JS 库 https://www.cnblogs.com/sxz2008/p/8245282.html

融云WEB API:https://www.rongcloud.cn/docs/web_api_demo.html

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181015G259QV00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券