175.Spring Boot WebSocket:单聊

【视频&交流平台】

àSpring Boot视频

http://study.163.com/course/introduction.htm?courseId=1004329008

àSpring Cloud视频

http://study.163.com/course/introduction.htm?courseId=1004638001

àSpring Boot源码

https://gitee.com/happyangellxq520/spring-boot

àSpring Boot交流平台

http://412887952-qq-com.iteye.com/blog/2321532

本文博客地址:http://412887952-qq-com.iteye.com/blog/2405514

需求缘起:

在前面的文章中已经实现了群聊,这里也简单介绍下单聊。这里使用session.getId()中的id作为唯一的消息通道(这里我们称为通讯的频道号), session.getId()是一个递增的数字,从0开始,递增1,2,3… 实际中并不会使用这个id作为标识,这里只是为了讲解方便。

效果展示:

先看下最终实现的效果,如下图:

悟空消息:

师傅消息:

八戒消息:

要实现上面的效果结果,只需要对之前的群聊稍加修改就可以支持单聊+群聊。

一、服务端调整

1.1创建一个Socket消息对象SocketMsg

这里我们就不能使用简单的文本消息进行消息的发送了,我们使用json进行消息的发送。所以需要先创建一个消息对象,里面包含了消息发送者,消息接受者,消息类型(单聊还是群聊),还是就是消息,如下:

1.2调整建立连接的方法(MyWebSocket)

这里主要是要使用一个map对象保存频道号和session之前的关系,之后就可以通过频道号获取session,然后使用session进行消息的发送。

定义一个map对象:

修改连接的方法onOpen:

在建立连接的时候,就保存频道号(这里使用的是session.getId()作为频道号)和session之间的对应关系:

修改消息发送的方法onMessage:

从客户端传过来的数据是json数据,所以这里使用jackson进行转换为SocketMsg对象,然后通过socketMsg的type进行判断是单聊还是群聊,进行相应的处理:

二、客户端调整

2.1加入频道号输入框

提供用户输入频道号进行单聊:

2.2修改消息发送方法

这里使用了js对象进行消息的传递,这里使用JSON.stringify将json对象转换为json字符串,如下代码:

好了,到这里就可以实现了单聊+群聊的效果。

三、新问题的提出

上面虽然可以实现单聊的方式,但是在具体的实际场景中,想要知道对方的频道号好像不是那么容易的哦,那么这个要怎么解决呢?大家在玩QQ群的时候,应该都用过聊天界面中的右边的群成员吧,对头,就是要实现一个在线群成员列表的功能,这样用户在操作的时候就可以直接通过点击某个在线的用户进行聊天了。博主,你会实现嘛?^_^,博主还暂时没有这个计划,其实看懂了上面的代码之后,要实现在线群成员列表也不是很难的事情了。

四、源代码

最后奉上源代码。大家可以下载源代码玩玩!

访问地址:https://gitee.com/happyangellxq520/spring-boot找到spring-boot-websocket-2017,直接下载即可运行。

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20171222B12A7I00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券