WebSocket+SpringBoot聊天室（一）

客官°小女子只卖身不卖艺 2022-05-17 01:12 307阅读 0赞

**目录**

1.项目展示

2.知识要点

3.用户列表

--------------------

## 1.项目展示 ##

![70][]

具体功能：

进入聊天室之前，需要先输入用户名再进入，聊天室中可以进行群聊，或者点击用户列表左边的CheckBox来制定给某些人发信息，或者一个人实现单聊。每个用户进入时会显示“欢迎\*\*进入聊天室”，离开会显示“恭送\*\*离开聊天室”

项目在我上一篇博文中的项目中进行改进：[https://blog.csdn.net/Doctor\_LY/article/details/81362718][https_blog.csdn.net_Doctor_LY_article_details_81362718]

## 2.知识要点 ##

在上一篇博文的技术上进行改进，我查看了一些资料，补充了一些知识点，然后再对这个项目进行开发。

*  一个WebSocket对象就是一个管道，一个管道代表一个session（上面三个客户端，其实就是有三条连接服务器的管道）
 *  管道与管道之间我是用Session来区分

![70 1][]

整体的思路还是比较简单，上一个项目其实已经实现了群聊，在基础上，我们只需要添加的功能是：

*  用户列表
 *  用户进入和离开提示
 *  用户单聊和多聊

多聊和单聊就是判断你选择了那个用户，获取该用户的SessionID,然后在广播的时候

根据已经获取的ID，来选择发送给那些用户。

## 3.用户列表 ##

在登录界面点击提交时，我们需要获取用户输入的用户名。然后传到聊天室界面，聊天室的页面js会访问服务器的WebSocket，此时我们需要把传过去的用户名，一起插到访问WebSocket服务器的URL中。WebScoket服务器再获取这个用户名，用来做用户列表。

登陆页面HTML：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>WebSocket</title>
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body style="background:#f5f5f5 url('../img/bg.jpg') no-repeat center;background-size:cover;height: 600px;">
        <form method="post" action="/LoginController" style="text-align: center;margin: 200px 0 0 0">
            <h1>WebSocket聊天室</h1>
            <h2>用户名：</h2><input placeholder="请输入聊天时的用户名" type="text" name="username"
                                style="border-radius: 5px;width: 180px;height: 30px;padding-left: 10px">
            <input class="btn btn-primary" type="submit">
        </form>
    </body>
    </html>

提交的方法和登陆的方法：

package com.example.websocket.controller;
    
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.GetMapping;
    import org.springframework.web.bind.annotation.PostMapping;
    import org.springframework.web.bind.annotation.RequestParam;
    import org.springframework.web.servlet.ModelAndView;
    
    import java.util.Map;
    
    @Controller
    public class LoginController {
    
        @PostMapping("/LoginController")
        public ModelAndView login(@RequestParam("username") String username,
                                  Map<String,Object> map){
            map.put("username",username);
            return new ModelAndView("chat",map);
    
        }
    
        @GetMapping("/login")
        public ModelAndView client(){
            return new ModelAndView("login");
        }
    }

![70 2][]

可以看到login方法获取用户名参数后，转到chat页面，因为这里用的是FreeMarker模板引擎，在chat页面中只需要用$\{username\}，就可以获取到用户名。chat页面中的js会去访问Websocket，需要携带参数过去。

//判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            webSocket = new WebSocket('ws://localhost:8080/webSocket?username=' + '${username}');
        } else {
            alert("当前浏览器不支持WebSocket");
        }

然后WebSocket需要获取该参数：

@OnOpen
        public void onOpen(Session session){
            this.session=session;
            webSockets.add(this);
            //获取用户名
            String s=session.getQueryString();
            String urlUsername=s.split("=")[1];
            try {
                username=URLDecoder.decode(urlUsername,"UTF-8");
            }
            catch (Exception e){
                e.printStackTrace();
            }
    
            //把SessionID和用户名放进集合里面
            map.put(session.getId(),username);
            System.out.println("有新的连接，总数"+webSockets.size()+"sessionId:"+session.getId()+" "+username);
            String content="欢迎"+username+"进入聊天室！";
            Message message=new Message(content,map);
            send(message.toJson());
        }

private Session session;
    private String username;
    
    private static CopyOnWriteArraySet<WebSocket> webSockets=new CopyOnWriteArraySet<>();
    private static Map<String,String> map=new HashMap<>();

因为在每一个WebSocket对象中，我们添加了两个属性，一个username一个session，所以对应每一个通道它都有自己的session和username。我们定义一个Map集合来存储session和username，这也方便后期用户离开聊天室去掉该用户。用户访问WebScoket，握手成功后会触发OnOpen方法，这时候我们就要广播说，某某同学进入聊天室了。所以就要在OnOpen方法中，广播了。

在上一个项目中，我们广播信息是直接用字符串来表示信息，在这个项目中，其实也是用字符串，但是是一个JSON字符串，这样方便携带更多信息，而且规范。我们想一下要广播的信息包括哪些内容，1、欢迎\*\*进入聊天室。2、还要一个用户列表，用来及时更新用户列表

定义一个广播信息类：

package com.example.websocket.vo;
    
    import com.google.gson.Gson;
    
    import java.text.DateFormat;
    import java.util.Date;
    import java.util.Map;
    
    public class Message {
    
        private String content;
    
        private Map<String,String> names;
    
        private Date date=new Date();
    
        public String getContent() {
            return content;
        }
    
        public void setContent(String content) {
            this.content = content;
        }
    
    
        public void setContent(String name,String msg) {
            this.content = name+" "+DateFormat.getDateTimeInstance().format(date) +":<br/> "+msg;
        }
    
        public Map<String, String> getNames() {
            return names;
        }
        public void setNames(Map<String, String> names) {
            this.names = names;
        }
    
    
        public String toJson(){
            return gson.toJson(this);
        }
    
        private static Gson gson=new Gson();
    
        public Message(String content, Map<String, String> names) {
            this.content = content;
            this.names = names;
        }
    
        public Message() {
        }
    }

public void setContent(String name,String msg) {
            this.content = name+" "+DateFormat.getDateTimeInstance().format(date) +":<br/> "+msg;
        }

上面这个方法是用来拼装规范信息的，每一条信息会说明是谁发送过来和具体的时间。

一个对象要转成JSON字符串就需要用到Gson。在Maven添加相关的依赖。

<dependency>
         <groupId>com.google.code.gson</groupId>
         <artifactId>gson</artifactId>
         <version>2.8.5</version>
    </dependency>

把信息拼装到Message对象中，然后转成JSON字符串，就可以广播了。

客户端在websocket.onmessage方法中接收到字符串和解析JSON字符串

webSocket.onmessage = function (event) {
    
            $("#userList").html("");
            eval("var msg=" + event.data + ";");
    
            if (undefined != msg.content)
                setMessageInnerHTML(msg.content);
    
            if (undefined != msg.names) {
                $.each(msg.names, function (key, value) {
                    var htmlstr = '<li>'
                            + '<div class="checkbox checkbox-success checkbox-inline">'
                            + '<input type="checkbox" class="styled" id="'+key+'" value="'+key+'" checked>'
                            + '<label for="'+key+'"></label>'
                            + '</div>'
                            + '<div class="liLeft"><img src="img/2.png"/></div>'
                            + '<div class="liRight">'
                            + '<span class="intername">'+value+'</span>'
                            + '</div>'
                            + '</li>'
    
                    $("#userList").append(htmlstr);
                })
            }
        }

把用户列表解析出来就得到用户列表了。

[70]: /images/20220517/58321852053e4dabbed18145176ddfda.png
[https_blog.csdn.net_Doctor_LY_article_details_81362718]: https://blog.csdn.net/Doctor_LY/article/details/81362718
[70 1]: /images/20220517/1a74e934c3264e9f89a98b8c79e2e636.png
[70 2]: /images/20220517/346ab76879644b8da2900cbfa5152591.png