SpringBoot学习——websocket组件学习在线聊天室demo

柔光的暖阳◎ 2022-06-10 02:20 299阅读 0赞

# SpringBoot学习——websocket组件学习在线聊天室demo #

因为之前用node.js实现过websocket的聊天室，后来在学习SpringBoot时看到WebSocket组件学习，所以就用之前的页面来实现了一遍

## 需求 ##

1.  简单聊天室实现。
2.  用户上线，下线。
3.  当前登录用户列表刷新。
4.  发送消息进行聊天。

## demo相关 ##

**demo下载：**[http://pan.baidu.com/s/1jHUBVBg][http_pan.baidu.com_s_1jHUBVBg]  
**演示图**  
![8wmXiMR.png][]

## 具体实现 ##

### 材料 ###

1.  MyEclipse
2.  Maven
3.  SpringBoot
4.  sockjs.min.js
5.  stomp.min.js
6.  jquery.js

### 过程 ###

#### 1.新建一个Maven项目 ####

![tQDpOKs.png][]

#### 2.结构目录 ####

![TM0tEJS.png][]

#### 3.pom.xml ####

配置pom.xml，引入相关依赖包，webSocket相关包是**spring-boot-starter-websocket**。

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
      <modelVersion>4.0.0</modelVersion>
      <groupId>com.pzr</groupId>
      <artifactId>chartroom</artifactId>
      <version>0.0.1-SNAPSHOT</version>
        
        <parent>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-parent</artifactId>
            <version>1.5.1.RELEASE</version>
        </parent>
        
        <dependencies>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-autoconfigure</artifactId>
            </dependency>
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-web</artifactId>
            </dependency>
    
            
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-websocket</artifactId>
                <version>1.5.1.RELEASE</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-devtools</artifactId>
                <optional>true</optional>
            </dependency>
    
            
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.31</version>
            </dependency>
    
            
            <dependency>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-starter-test</artifactId>
                <scope>test</scope>
            </dependency>
    
        </dependencies>
    
        
        <build>
            <plugins>
                <plugin>
                    <groupId>org.springframework.boot</groupId>
                    <artifactId>spring-boot-maven-plugin</artifactId>
                </plugin>
                
                <plugin>
                    <groupId>org.apache.maven.plugins</groupId>
                    <artifactId>maven-jar-plugin</artifactId>
                    <configuration>
                        <archive>
                            <manifest>
                                <addClasspath>true</addClasspath>
                                <mainClass>com.pzr.chatroom.Lancher</mainClass>
                            </manifest>
                        </archive>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </project>

#### 4.Lancher.java ####

springboot的启动程序

import org.springframework.boot.SpringApplication;
    import org.springframework.boot.autoconfigure.SpringBootApplication;
    
    /** * 启动器 * @author pzr * */
    @SpringBootApplication
    public class Lancher { 
          public static void main(String[] args) { 
                SpringApplication.run(Lancher.class, args); 
            } 
    
    }

#### 5.ChatRoomConfig.java ####

webSocket的配置类

import org.springframework.context.annotation.Configuration;
    import org.springframework.web.socket.config.annotation.AbstractWebSocketMessageBrokerConfigurer;
    import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
    import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
    
    /** * WebSocketDemo * @author pzr * */
    @Configuration
    @EnableWebSocketMessageBroker//开启使用STOMP协议来传输基于代理的消息，支持使用@MessageMapping(类似于@RequestMapping)
    public class ChatRoomConfig extends AbstractWebSocketMessageBrokerConfigurer{ 
    
        @Override
        public void registerStompEndpoints(StompEndpointRegistry registry) { //注册STOMP协议节点，并映射指定的URL
            registry.addEndpoint("/endpointWisely").withSockJS(); //注册一个STOMP的endpint，并指定使用SocketJS协议
        }
    }

#### 6.ChatRoomController.java ####

聊天室的控制器，包含上线，下线，聊天和刷新登录用户列表  
1. 使用@MessageMapping(“/talk”)供给前端访问调用  
2. 使用@SendTo(“/refreshchatwindow”)，将消息发送给监听了refreshchatwindow的客户端  
3. 使用template.convertAndSend(“/refreshloginlist”,CacheBean.clientList);，从服务端向监听了refreshchatwindow的客户端发送消息

import java.text.SimpleDateFormat;
    import java.util.Date;
    import java.util.List;
    
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.messaging.handler.annotation.MessageMapping;
    import org.springframework.messaging.handler.annotation.SendTo;
    import org.springframework.messaging.simp.SimpMessagingTemplate;
    import org.springframework.stereotype.Controller;
    
    import com.pzr.chatroom.entity.CacheBean;
    import com.pzr.chatroom.entity.ChatContent;
    import com.pzr.chatroom.entity.User;
    
    
    /** * 演示控制器 * @author pzr * */
    @Controller
    public class ChatRoomController { 
    
         @Autowired
         private SimpMessagingTemplate template;
    
        /** * 聊天 * @param msg * @return */
        @MessageMapping("/talk")//浏览器映射地址
        @SendTo("/refreshchatwindow")
        public ChatContent talk(ChatContent content) {
            SimpleDateFormat sdf = new SimpleDateFormat("HH:mm:ss");
            content.setDate(sdf.format(new Date()));
            return content;
        }
    
        /** * 下线 * @param msg * @return */
        @MessageMapping("/downLine")
        private void downLine(User msg) {
            List<User> list = CacheBean.clientList;
            list.remove(msg);
            //服务器端通知客户端刷新当前登录人列表
            refreshLoginList();
        }
    
        /** * 上线 * @param msg * @return */
        @MessageMapping("/upLine")
        private void upLine(User msg) {
            //内存中将用户加入进来
            List<User> list = CacheBean.clientList;
            list.add(msg);
            //服务器端通知客户端刷新当前登录人列表
            refreshLoginList();
        }
    
        /** * 服务器端通知客户端刷新当前登录人列表 * @param list */
        @MessageMapping("/refreshLoginList")
        public void refreshLoginList( ){
            template.convertAndSend("/refreshloginlist",CacheBean.clientList);
        }
    }

#### 7.User.java ####

1.  用户实体，包含名称和uuid
2.  uuid用作当用户下线时从内存中移除该对象
3.  重写equals，判断uuid一致的为相同对象，保证list.remove(msg)有效

/** *用户实体 * * @author pzr * */
    public class User { 
    
        private String uuid;
    
        private String name;
    
        public String getUuid() {
            return uuid;
        }
    
        public void setUuid(String uuid) {
            this.uuid = uuid;
        }
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        @Override
        public int hashCode() {
            final int prime = 31;
            int result = 1;
            result = prime * result + ((uuid == null) ? 0 : uuid.hashCode());
            return result;
        }
    
        @Override
        public boolean equals(Object obj) {
            if (this == obj)
                return true;
            if (obj == null)
                return false;
            if (getClass() != obj.getClass())
                return false;
            User other = (User) obj;
            if (uuid == null) {
                if (other.uuid != null)
                    return false;
            } else if (!uuid.equals(other.uuid))
                return false;
            return true;
        }
    }

#### 8.ChatContent.java ####

1.  聊天内容实体，包含发送时间，发送人和内容

/** * 聊天内容 * @author pzr * */
    public class ChatContent { 
        /** * 时间 */
        public String date;
        /** * 内容 */
        public String content;
        /** * 发送消息的人 */
        public String sendUser;
        public String getDate() {
            return date;
        }
        public void setDate(String date) {
            this.date = date;
        }
        public String getContent() {
            return content;
        }
        public void setContent(String content) {
            this.content = content;
        }
        public String getSendUser() {
            return sendUser;
        }
        public void setSendUser(String sendUser) {
            this.sendUser = sendUser;
        }
    }

#### 9.CacheBean.java ####

将当前登录人信息存在内存中

import java.util.ArrayList;
    import java.util.List;
    
    public class CacheBean { 
        /** * 使用静态集合来存储当前登录用户 */
        public static List<User> clientList = new ArrayList<User>();
    }

#### 10.chatroom.html ####

1.  聊天页面，在sprigboot中，放在static下的静态文件可访问.
2.  需要引入sockjs.min.js和stomp.min.js两个文件
3.  先登录才可发言
4.  可以发言快捷键ctrl+enter

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>聊天室</title>
    <style type="text/css"> </style>
    <script type="text/javascript" src="js/sockjs.min.js"></script>
    <script type="text/javascript" src="js/stomp.min.js"></script>
    
    <script type="text/javascript"> var nowUUID = ""; var stompClient = null; window.onload = function() { //连接服务器 var socket = new SockJS("/endpointWisely"); stompClient = Stomp.over(socket); //响应事件监听 stompClient.connect({}, function(frame) { //监听刷新当前登录人列表 stompClient.subscribe("/refreshloginlist", function(respnose) { var serverObj = JSON.parse(respnose.body);//返回是一个当前登录人数组 var nameArrStr = ""; for (var i = 0; i < serverObj.length; i++) { nameArrStr = nameArrStr + serverObj[i].name + "\n"; } console.log(nameArrStr); userList.value = nameArrStr; }); //监听刷新聊天窗口 stompClient.subscribe("/refreshchatwindow", function(respnose) { var serverObj = JSON.parse(respnose.body);//返回是一个当前登录人数组 var contentArea = document.getElementById("contentArea"); var val = contentArea.value; var returnText = serverObj.sendUser+" "+serverObj.date+":\n "+" "+serverObj.content+"\n "; contentArea.value = val + returnText; contentArea.scrollTop = contentArea.scrollHeight; }); //刷新当前登录用户列表 stompClient.send("/refreshLoginList", {}, {}); }); //键盘事件注册 document.onkeydown = function(event) { //ctrl+enter发送消息 if (window.event.ctrlKey && window.event.keyCode == 13) { sendTalk(); } }; } //上下线 function upLine() { var upDownBtn = document.getElementById("upDownBtn"); var uaerNameTxt = document.getElementById("uaerNameTxt"); var uuidLab = document.getElementById("uuidLab"); var userList = document.getElementById("userList"); if (uaerNameTxt.value == "") { alert("请输入名称！"); return; } if (upDownBtn.value == "上线") { upDownBtn.value = "下线"; uaerNameTxt.readOnly = true; nowUUID = guid(); uuidLab.innerText=nowUUID; //上线完成，添加用户 var myObj = new Object(); myObj.uuid = nowUUID; myObj.name = uaerNameTxt.value; var json_data = JSON.stringify(myObj); stompClient.send("/upLine", {}, json_data); } else { upDownBtn.value = "上线"; uaerNameTxt.readOnly = false; //下线完成，删除用户 var myObj = new Object(); myObj.uuid = nowUUID; var json_data = JSON.stringify(myObj); stompClient.send("/downLine", {}, json_data); nowUUID = ""; uuidLab.innerText=nowUUID; } } //发言 function sendTalk() { var upDownBtn = document.getElementById("upDownBtn"); if (upDownBtn.value == "上线") { alert("请先上线！"); return; } var userName = document.getElementById("uaerNameTxt").value; var sendContent = document.getElementById("sendContent"); //往服务器发消息 var myObj = new Object(); myObj.sendUser = userName; myObj.content = sendContent.value; var json_data = JSON.stringify(myObj); stompClient.send("/talk", {}, json_data); sendContent.value = ""; sendContent.focus(); } //浏览器关闭事件 发起删除登录人消息 window.onbeforeunload = onbeforeunload_handler; function onbeforeunload_handler() { //下线完成，删除用户 var myObj = new Object(); myObj.uuid = nowUUID; var json_data = JSON.stringify(myObj); stompClient.send("/downLine", {}, json_data); } //生成uuid function guid() { return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) { var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8); return v.toString(16); }); } </script>
    </head>
    <body style="">
        <table border="1" style="width: 50%;height: 600px; border-color: #00B7FF;margin：0 auto">
            <tr height="40px">
                <td colspan="4">当前登录人： <input id="uaerNameTxt" type="text" width="400px" height="100%" /> <input id="upDownBtn" type="button" value="上线" onclick="upLine()" /> <label id="uuidLab"></label>
                </td>
            </tr>
            <tr>
                <td colspan="3"><textarea id="contentArea" name="contentArea" disabled="disabled" style="width:100%;height:370px;padding:0px;margin:0px;"></textarea>
                </td>
                <td rowspan="3" width="150px"><textarea id="userList" name="userList" disabled="disabled" style="width:100%;height:565px;padding:0px;margin:0px;"></textarea>
                </td>
            </tr>
            <tr height="150px">
                <td colspan="3"><textarea id="sendContent" style="width:100%;height:140px;padding:0px;margin:0px;"></textarea>
                </td>
            </tr>
            <tr height="40px">
                <td colspan="2"></td>
                <td width="80px" style="padding:0px;"><input type="button" onclick="sendTalk()" value="发送" style="width:100%;height:40px;margin:0px;border:0px;padding:0px;" />
                </td>
            </tr>
        </table>
    </body>
    </html>

## 参考 ##

[http://blog.csdn.net/PandaWang1989/article/details/54863489?locationNum=5&fps=1][http_blog.csdn.net_PandaWang1989_article_details_54863489_locationNum_5_fps_1]  
[http://blog.csdn.net/yingxiake/article/details/51224569][http_blog.csdn.net_yingxiake_article_details_51224569]

[http_pan.baidu.com_s_1jHUBVBg]: http://pan.baidu.com/s/1jHUBVBg
[8wmXiMR.png]: http://i.imgur.com/8wmXiMR.png
[tQDpOKs.png]: http://i.imgur.com/tQDpOKs.png
[TM0tEJS.png]: http://i.imgur.com/TM0tEJS.png
[http_blog.csdn.net_PandaWang1989_article_details_54863489_locationNum_5_fps_1]: http://blog.csdn.net/PandaWang1989/article/details/54863489?locationNum=5&fps=1
[http_blog.csdn.net_yingxiake_article_details_51224569]: http://blog.csdn.net/yingxiake/article/details/51224569