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

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/