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