PC端网站接入环信IM聊天系统

首先在项目中引入环信相关文件

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/ 

你可能感兴趣的:(PC端网站接入环信IM聊天系统)