Websocket IM聊天教程-教你用GoEasy快速实现IM聊天

本文会持续在OSChina码云上更新，最新版本请访问https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat

常常有朋友问起GoEasy如何实现IM，今天就手把手的带你们从头至尾用GoEasy实现一个完整IM聊天。

今日的前端技术发展可谓百家争鸣，为了确保本文能帮助到使用任何技术栈的前端工程师，Demo的源码实现上选择了最简单的HTML+JQuery的方式，因此,不论您是准备用Uniapp开发移动APP，仍是准备写个小程序，不论你喜欢用React仍是VUE，仍是React-native或ionic, 或者您直接用原生Javascript和Typescript，都是能够轻松理解，全套代码开源在OSCHINA码云（https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat）上了，下载后不须要搭建任何环境，直接用浏览器打开，就能够用来聊天了。

做为一名程序员，在编码以前，首先要作的固然是架构设计！什么？确认不是装逼？固然，别忘了星爷的那句话：我是一名程序员！没有思想的程序员，跟咸鱼有什么区别呢？

咳咳咳，正文开始：

首先咱们代码层将整个功能分为四层：

1. 华丽的展现层（index.html）：大家负责功能优雅强大，我负责貌美如花。展现层其实就是纯静态的html，显示界面，高端点说，就是负责人机交互的。
2. 承上启下的控制层（controller.js）: 控制层做用就是接受页面操做的参数，调用service层，根据页面的操做指令或者service层的反馈，负责对页面的展现作出控制。不能够编写任何与展现逻辑无关的代码，也就是不能侵入任何业务逻辑。衡量这一层作的好很差的的标准，就是假设删掉controller和view层，service能准确完整的描述全部的业务逻辑。 
3. 指挥若定的关键核心业务层（service.js）: 接受controller层的指令，实现业务逻辑，必要时候调用goeasy提供网络通信支持，或调用restapi层完成数据的查询和保存。这一层包含全部的业务逻辑，任何业务逻辑相关的代码，都不能够漏到其余层，确保只要service存在，整个项目的灵魂就存在，确保service层彻底是原生代码实现业务逻辑，而没有相似于vue或者小程序前端框架的语法和代码渗入，从而达到service层可以在任何前端框架通用。
4. 神通广大的服务器交互层（restapi.js）: 根据传入的参数完成服务器端接口的调用，来实现数据查询或、修改或保存，而且返回结果，不参与任何业务逻辑。在实践中大部分是负责发送http请求和服务器交互。

分层的目标就是为了确保除了在核心业务层之外的其余层次可以被轻易的替换。举例：咱们当前的版本是使用html+jquery完成，若是但愿再开发一个Uniapp实现的小程序或者app，只须要用Uniapp画个新外壳，对controller层作一些修改，就可轻松完成一个小程序或者APP版的IM聊天，不须要对service和restapi作任何修改 。同理，若是服务器端发生变化，或者更换了与服务器的交互方式，只须要对restapi作出修改，其余三层则不受任何影响。

OK, 有了如此清晰而优秀的代码结构分层设计，就差一段优雅的代码来实现了。

对历来没有使用过GoEasy的朋友来讲，直接往下读，可能感受稍微有点陡，能够先花3分钟了解一下GoEasy的快速入门：https://www.goeasy.io/cn/get-start.html

但对于已经对GoEasy有所了解的朋友来讲，那就是轻车熟路了，再结合着咱们的开源Demo来读本文，就更是能够垂手可得的快速的作一个IM出来了~

Ready, Go! 编码开始：

1.登陆界面：
这个最简单，闭着眼睛画个界面，用户名密码正确后，完成如下几个步骤：
1.1.根据用户名查询出来的用户，初始化全局变量：当前用户
1.2.将controller层的onNewMessage, onFriendOnline，onFriendOffline赋值给service
1.3.new goeasy创建长链接，记得要传入userid。如需在subscriberPrencese用户上下线提醒事件，或者在调用HereNow获取在线用户列表时，能拿到userId之外，更多的信息，能够在userdata里传入。
1.4.调用restapi，查询该用户的好友列表，根据结果初始化本地好友列表friendlist。
1.5.将须要监听的好友的friendUUID放入一个数组，调用subscriberPrencense，监听好友的上下线事件
1.6.以当前用户的uuid为channel，调用subscriber，监听来自全部好友发来的消息。
1.7.显示好友列表界面。
1.8.初始化好友的在线状态，以数组形式传入全部好友的userId，调用hereNowByUserIds，得到当前在线的好友列表，根据结果将friendlist里属于在线状态的friend的在线状态改成true，同时将界面上在线用户的头像改成彩色。

2.显示好友列表（1.7）：
2.1.service层获取当前用户信息，在页面显示当前用户的username和头像。
2.2.service获取本地好友列表，而后controller将每一个好友的头像和名称显示到页面上，对于当前在线的用户，旁边显示一个小绿点，而且为每一个好友绑定一个点击事件，点击好友时，显示聊天界面, 若是该好友有未读消息的，红色小气泡显示未读消息数量。

3.点击一个好友，进入与其聊天的界面：
3.1.窗口顶部显示聊天好友的名称。
3.2.调用restapi根据当前用户的UUID和好友的friendUUID，查询与该好友的聊天记录，若是这个聊天记录的sender是本身，就显示在页面的右边，若是是朋友发的，则显示在左边。
3.3.将该好友在本地数据里未读消息恢复为0。
3.4.而且将聊天记录滚动到最下边。
3.5.若是点击返回，就直接进入第二步。

4.在聊天界面，输入消息后发送：
4.1.当前用户uuid做为senderUUID和消息内容组成chatMessage。
4.2.调用restapi将chatMessage发往“服务器”端，咱们建议的方式是全部的消息发往本身的服务器端，在服务器端先保存入库，而后在服务端publish。具体作法是将chatMessage转换为字符串，入库，而后将该好友的channel做为channel调用GoEasy完成publish。(固然，你会发如今咱们的示例代码这个过程是在restapi里直接完成的，缘由是为了demo的演示方便，咱们模拟的服务器端行为，相信你懂的）
4.3.本身的消息发送成功后，显示在聊天窗口的右边。

5.收到新消息：
在1.6定义了接收好友新消息的事件，当收到一条好友的新消息时：
5.1.首先调用restapi保存到服务器。
5.2.本地好友数据里的未读消息加1。
5.3.若是当前界面是好友列表，未来自该朋友的未读消息的数字显示在界面上。
5.4.若是收到的消息就是来自当前对话窗口，就将消息显示到聊天窗口，而且调用service将本地数据里该好友的未读消息清0。

6.用户上下线提醒：
在1.5监听了用户上下线，当收到一个用户上线或下线的通知后（注意返回的是一个列表，一次事件有可能有多个好友都发生了状态变化）：
6.1.修改将本地数据里该好友对象在线状态,若是是上线事件就显示彩色，若是是下线就显示黑白色。

至此，整个聊天功能就完成了，是否是很简单呢。在整个demo中只用到了goeasy的四个API：
subscriber（接收消息），subscriberPrencense（接受上下线通知），hereNowByUserIds(获取当前在线用户列表）, publish(发送消息)，详情能够参考goeasy官方文档：https://www.goeasy.io/cn/developers.html

哼！这难道不是纸上谈兵吗？Talk is cheap, show me the code! 优雅的代码在哪里呢？

别着急，全套代码都开源在OSCHINA码云上， https://gitee.com/goeasy-io/GoEasyDemo-IM-Chat

注意事项：
1.在restapi.js里能够找到用户名和密码
2.在service.js里将appkey替换为您本身的common key
3.subscriberPrencense和hereNowByUserIds这两个方法，默认是关闭的，须要扫码添加GoEasy客服开通哦~

将代码与本文一块儿对照阅读后，要写个IM，比画个0还简单，若是使用的是其余的前端技术框架如小程序和Reactnative，只须要从新画个外壳就行了！什么,你不相信？若是以为你被骗了，请扫码添加微信好友，欢迎吐槽！没有您暴风雨般的吐槽和春风通常的赞美，我如何进步呢？

彩弹在最后： 看了代码的你，是否是发现咱们的RESTAPI实际上是个冒牌货，并不会真的和远程的某个服务器交互，这是为了方便演示，咱们定义了两个变量来帮助模拟远程数据的查询，而后用localstorage来模拟服务器的保存，相信聪明的你，确定已经get到咱们的代码思路了。