首先在项目中引入环信相关文件
webim.config.js,strophe-1.2.8.js,websdk-1.4.13.js
然后在webim.config.js中配置自己所需要的选项(如下图)
准备工作完成,接下来开始步入正题:
创建一个主js文件。
1.首先连接环信:
2.连接成功以后,开始登录环信(由于我们的项目中的环信账号是在后台注册后直接返回给前端的,所以省去了注册的环节):
3.开始写接收消息的监听事件:
由于我们项目中仅仅用到了文字和图片消息,一些比较复杂功能的比如已读未读、表情包之类的配置就为空了。
4.此时就能够在收到消息的时候执行你自己的js文件了,从而消息接收部分就已经完成了。发送消息部分因为我们是在后台调环信的,所以前端只需要请求后台接口保存数据就行了。
下图为前端自己调环信发送消息,根据所发送消息的类型不同,从而对应不同的代码。
5.此时,一个基本的聊天系统就很完善了,上个图展示一下~。
附录:
环信官方开发文档:http://docs-im.easemob.com/