websocket单聊模式

川长思鸟来 2023-05-22 22:21 7阅读 0赞

本篇文章讲述如何将`WebSocket`群聊模式改造为单聊模式，并详细讲解该功能的实现过程。

本`Demo`是一个商城小项目，将单聊应用在了前台用户与后台客服的在线聊天，此模式为单聊模式，代码都是在我之前写的`websocket`群聊代码的基础之上改写的，[可参考之前的文章][Link 1]。

# 一，思路梳理 #

## 1，首先思考群聊的实现方式。 ##

> 每当一个用户使用websocket建立连接时，都会存放一个连接对象（在connectMap集合存放，键为sessionId，值为该连接对象），每次当用户发送一条数据时，都会遍历connectMap中所有的连接对象，然后进行广播发送消息，接收消息也是，谁的消息都收，来之不拒，所以此为群聊。

## 2，再来举一反三，思考单聊的实现方式。 ##

> 单聊的话，要改变下面几个地方。
> 
> 1，存放connectMap连接对象时，值要为userId（唯一标识）。
> 
> 2，使用websocket建立连接时要把自己的userId（发送人）和对方的userId（接收人）传到后台，因为发消息时，根据userId得到连接对象，并使用连接对象发消息到对方的窗口和自己的窗口。
> 
> 3，在js获取消息的地方要判断该消息的发送人userId是否和初始化时的接收人userId一致，如果一致的话则将消息添加到自己的窗口进行显示，如果不一致则不显示。

有一个地方需要提一下，比如要给A用户发送消息，就要根据A的`userId`得到连接对象，然后就会把消息发送给A用户。

# 二，代码分析 #

## 1，首先是用户聊天框的`js`代码（`html`忽略） ##

此为用户点击在线客服按钮进入聊天框页面就执行的`js`代码。

说明：下面接收人id写死了为`超级管理员`，我这里省事情了，因为超级管理员的账号（也就是唯一标识）就是`超级管理员`这五个字，当真正开发时就要动态获取唯一标识了！

## 2，其次为后台系统客服聊天框的`js`代码 ##

## 3，最后为服务端的`websocket`实例 ##

package com.qianlong.controller;
    
    import com.qianlong.service.SelectService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Component;
    
    import java.io.IOException;
    import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.HashMap;
    import java.util.Map;
    import javax.websocket.OnClose;
    import javax.websocket.OnMessage;
    import javax.websocket.OnOpen;
    import javax.websocket.Session;
    import javax.websocket.server.PathParam;
    import javax.websocket.server.ServerEndpoint;
    /** * 聊天室的服务端程序 * @author Administrator * */
    //声明websocket某个服务端的地址
    @ServerEndpoint(value = "/charRoomServer/{param}")
    @Component
    public class ChatRoomServer { 
        @Autowired
        public static SelectService selectService;
        private boolean firstFlag=true;
        private Session session;
        private String userName;
    
        //发送人id
        private String userId;
        //key代表此次客户端的userId，value代表此次连接对象
        private static final HashMap<String, Object> connectMap=new HashMap<String, Object>();
        //保存所有用户昵称信息
        //key是session的id，value是用户昵称
        private static final HashMap<String, String> userMap=new HashMap<String, String>();
        //服务端收到客户端的连接请求，连接成功后会执行此方法
        @OnOpen
        public void start(@PathParam(value = "param") String param, Session session) { 
            this.session=session;
            this.userId=param; //接收参数
            connectMap.put(param,this);
        }
    
        //客户端发来的信息，服务端接收
        @OnMessage              //接收人userId
        public void chat(String clientMessage,Session session) { 
            //firstFlag为true是第一次进入，第二次进入之后设为false
            ChatRoomServer client=null;
            if(firstFlag) { 
                this.userName=clientMessage;
                //将新进来的用户保存到用户map
                userMap.put(session.getId(), userName);
    
                try { 
                   if("超级管理员".equals(userId)){ 
    
                   }else{ 
                       //构造发送给客户端的提示信息
                       String message=htmlMessage("大白机器人：","亲爱的"+userId+"，您想了解点儿啥？");
                       client=(ChatRoomServer) connectMap.get(userId);
                       //给对应的web端发送一个文本信息
                       client.session.getBasicRemote().sendText(message);
                   }
                } catch (IOException e) { 
                    e.printStackTrace();
                }
                firstFlag=false;
            }else { 
                System.err.println("clientMessage:"+userName);
                //给对方发消息
                String message1=htmlMessage(userId,clientMessage);
                client  = (ChatRoomServer) connectMap.get(userName);
               if(client!=null){ 
                   try { 
                       client.session.getBasicRemote().sendText(message1);
                   } catch (IOException e) { 
                       e.printStackTrace();
                   }
               }
                //给自己窗口发消息
                String message2=htmlMessage(userId,clientMessage);
                client  = (ChatRoomServer) connectMap.get(userId);
                try { 
                    client.session.getBasicRemote().sendText(message2);
                } catch (IOException e) { 
                    e.printStackTrace();
                }
               
                //这是将前台用户发送的消息存数据库并标记为未读，和上面通信没关系
                if("超级管理员".equals(userId)){ 
    
                }else{ 
                    Map map=new HashMap();
                    map.put("account",userId);
                    map.put("message",clientMessage);
                    map.put("addtime",new Date());
                    int i = selectService.chatInsert(map);
                    System.out.println(i);
                }
            }
            }
        
        /** * 前台js的ws.close事件，会触发后台的标注onClose的方法 */
        @OnClose
        public void close() { 
            userMap.remove(session.getId());
            connectMap.remove(userId);
        }
        /** * 渲染页面，把信息构造好标签再发送 */
        public String htmlMessage(String userName,String message) { 
            StringBuffer stringBuffer=new StringBuffer();
            SimpleDateFormat sf=new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
            stringBuffer.append("<article>");
            stringBuffer.append("<span>"+sf.format(new Date())+"</span>");
            stringBuffer.append("<div class='avatar'>");
            stringBuffer.append("<h3>"+userName+"</h3>");
            stringBuffer.append("</div>");
            stringBuffer.append("<div class='msg'>");
            stringBuffer.append("<div class='tri'></div>");
            stringBuffer.append("<div class='msg_inner'>"+message+"</div>");
            stringBuffer.append("</div>");
            stringBuffer.append("</article>");
            //这里拼接了消息发送人的userId，在前台进行截取字符串接收发送人的userId
            stringBuffer.append("|"+userName);
            return stringBuffer.toString();
        }
    }

# 三，依赖注入 #

在`websocket`中进行依赖注入`service`并调用`service`方法进行数据库存储，如果按常规的方式是走不通的。

解决方式：

在该`springboot`项目中添加一个`WebsocketConfig`配置类，对`service`进行配置。

@Configuration
    public class WebSocketConfig { 
        /** * ServerEndpointExporter 用于扫描和注册所有携带 ServerEndPoint 注解的实例， * 若部署到外部容器 则无需提供此类。 */
        @Bean
        public ServerEndpointExporter serverEndpointExporter() { 
            return new ServerEndpointExporter();
        }
    
        /** * 因 SpringBoot WebSocket 对每个客户端连接都会创建一个 WebSocketServer（@ServerEndpoint 注解对应的对象，Bean 注入操作会被直接略过，因而手动注入一个全局变量 */
        @Autowired
        public void setSelectService(SelectService selectService) { 
            ChatRoomServer.selectService = selectService;
        }
    }

然后在`websocket`中注入`service`。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][20191129105909933.png]

# 四，效果展示 #

在前台商城登录用户18838030468账号

点击联系客服

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 1]

进到聊天框中（左下角的用户名忽略，因为上面通过截取字符串得到的发送人userId，所以这里多了一个userId）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 2]

然后发送消息给客服

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 3]

然后退出18838030468账号并切换用户13333333333账号进行登录，然后点击客服，进入聊天页面

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 4]

然后发送消息给客服

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 5]

这个13333333333账号先不要退，直接登录后台超级管理员账号

登录之后会提示未读消息的信息。

点击客服管理，进入客服聊天平台，并显示消息未读数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 6]

点击18838030468未读消息，查看消息并进行回复。（这是给18838030468用户发送的消息，其他用户是接收不到的，正规开发中，要把客服发送的消息存到缓存或数据库中，然后再在前台用户聊天框中进行显示聊天记录即可，这里忽略不做）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 7]

然后再点击13333333333未读消息进行查看，并回复消息。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 8]

这是给13333333333用户发送的消息，其他用户也是收不到的。

查看13333333333用户的聊天框内容，可以收到客服的消息，然后该用户可以和客服实现在线单聊。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 9]

本次`websocket`讲解到此结束，谢谢观赏！

[Link 1]: https://fantongxue666.github.io/2019/11/08/WebSocket%E5%AE%9E%E7%8E%B0%E5%A4%9A%E4%BA%BA%E5%9C%A8%E7%BA%BF%E8%81%8A%E5%A4%A9%E5%8A%9F%E8%83%BD/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70]: /images/20230521/c6a9885836f049d081861126f375e0bb.png
[20191129105909933.png]: /images/20230521/4e245fd625044791901c678aef8010bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 1]: /images/20230521/79b93818b19146998f841ed0f3f1f2fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 2]: /images/20230521/cbc0566444df42a982c8199e892c45b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 3]: /images/20230521/ce93b29725534366bfc2a27f7e5e80e5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 4]: /images/20230521/64d23a1729854d4bb9165d508b0856a6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 5]: /images/20230521/15a8e7d226154aa7b644cc6fc431d853.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 6]: /images/20230521/6d1acc6f0ebe49e1a9f46e6dbdef153a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 7]: /images/20230521/7bb4cb38e08c48f0bea92abc6c8502e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 8]: /images/20230521/cd7d136cec5b4478ab00b83162c88c40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDAwMTk2NQ_size_16_color_FFFFFF_t_70 9]: /images/20230521/b39e9b326fcf437882b3edf8d64764c4.png