基于WebSocket的网页聊天室

拼搏现实的明天。 2023-10-08 21:29 10阅读 0赞

### **1基于WebSocket的网页聊天室** ###

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

#### **1.1 需求** ####

通过 websocket 实现一个简易的聊天室功能 。

1）. 登陆聊天室

![d9aabe1fdc564b8e8d4bc25b06b06741.png][]

2）. 登陆之后，进入聊天界面进行聊天

登陆成功后，呈现出以后的效果：

![195a7e4379154f4dbb86a3102c9d9a52.png][]

当我们想和李四聊天时就可以点击 好友列表 中的 李四，效果如下：

![c125820b8a534346b4dbd83cb45e744f.png][]

接下来就可以进行聊天了，张三 的界面如下：

![9df0b79182c54a98a2bc12b4371fab19.png][]

李四 的界面如下：

![a49db0409e66423195699c66c980c755.png][]

#### **1.2 实现流程** ####

![a1705ba998584d27ab6e4d9e5f1f9c60.png][]

#### **1.3 消息格式** ####

*  客户端 --> 服务端

\{"toName":"张三","message":"你好"\}

*  服务端 --> 客户端

*  系统消息格式：\{"isSystem":true,"fromName":null,"message"：\["李四","王五"\]\}

*  推送给某一个的消息格式：\{"isSystem":false,"fromName":"张三","message"："你好"\}

#### **1.4 功能实现** ####

##### **1.4.1 创建项目，导入相关jar包的坐标** #####

<parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.5.RELEASE</version>
    </parent>
    
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-websocket</artifactId>
        </dependency>
    
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        
        
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <optional>true</optional>
            <scope>true</scope>
        </dependency>
    </dependencies>
    
    <build>
        <plugins>
            
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

##### **1.4.2 引入静态资源文件** #####

![a155aa66506245d5aa70899e7808f4ad.png][]

##### **1.4.3 引入公共资源** #####

pojo类

/**
     * @version v1.0
     * @ClassName: Message
     * @Description: 浏览器发送给服务器的websocket数据
     * @Author: 黑马程序员
     */
    public class Message {
        private String toName;
        private String message;
    
        public String getToName() {
            return toName;
        }
    
        public void setToName(String toName) {
            this.toName = toName;
        }
    
        public String getMessage() {
            return message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    }

/**
     * @version v1.0
     * @ClassName: ResultMessage
     * @Description: 服务器发送给浏览器的websocket数据
     * @Author: 黑马程序员
     */
    public class ResultMessage {
    
        private boolean isSystem;
        private String fromName;
        private Object message;//如果是系统消息是数组
    
        public boolean getIsSystem() {
            return isSystem;
        }
    
        public void setIsSystem(boolean isSystem) {
            this.isSystem = isSystem;
        }
    
        public String getFromName() {
            return fromName;
        }
    
        public void setFromName(String fromName) {
            this.fromName = fromName;
        }
    
        public Object getMessage() {
            return message;
        }
    
        public void setMessage(Object message) {
            this.message = message;
        }
    }

/**
     * @version v1.0
     * @ClassName: Result
     * @Description: 用于登陆响应回给浏览器的数据
     * @Author: 
     */
    public class Result {
        private boolean flag;
        private String message;
    
        public boolean isFlag() {
            return flag;
        }
    
        public void setFlag(boolean flag) {
            this.flag = flag;
        }
    
        public String getMessage() {
            return message;
        }
    
        public void setMessage(String message) {
            this.message = message;
        }
    }

MessageUtils工具类、

/**
     * @version v1.0
     * @ClassName: MessageUtils
     * @Description: 用来封装消息的工具类
     * @Author: 
     */
    public class MessageUtils {
    
        public static String getMessage(boolean isSystemMessage,String fromName, Object message) {
            try {
                ResultMessage result = new ResultMessage();
                result.setIsSystem(isSystemMessage);
                result.setMessage(message);
                if(fromName != null) {
                    result.setFromName(fromName);
                }
                ObjectMapper mapper = new ObjectMapper();
    
                return mapper.writeValueAsString(result);
            } catch (JsonProcessingException e) {
                e.printStackTrace();
            }
            return null;
        }
    }

##### **1.4.4 登陆功能实现** #####

*  login.html：使用异步进行请求发送

$(function() {
        $("#btn").click(function() {
            $.get("login",$("#loginForm").serialize(),function(res) {
                if(res.flag) {
                    //跳转到 main.html页面
                    location.href = "main.html";
                } else {
                    $("#err_msg").html(res.message);
                }
            },"json");
        });
    })

UserController：进行登陆逻辑处理

@RestController
    public class UserController {
    
        @RequestMapping("/login")
        public Result login(User user, HttpSession session) {
            Result result = new Result();
            if(user != null && "123".equals(user.getPassword())) {
                result.setFlag(true);
                //将用户名存储到session对象中
                session.setAttribute("user",user.getUsername());
            } else {
                result.setFlag(false);
                result.setMessage("登陆失败");
            }
    
            return result;
        }
    }

##### **1.4.5 获取当前登录的用户名** #####

*  main.html：页面加载完毕后，发送请求获取当前登录的用户名

var username;
    $(function() {
        $.ajax({
            url:"getUsername",
            success:function(res) {
                username = res;
                $("#userName").html("用户：" + res + "<span style='float: right;color: green'>在线</span>");
            },
            async:false
        });
    }

UserController

在UserController中添加一个getUsername方法，用来从session中获取当前登录的用户名并响应回给浏览器

@RequestMapping("/getUsername")
    public String getUsername(HttpSession session) {
        String username = (String) session.getAttribute("user");
        return username;
    }

##### **1.5.6 聊天室功能** #####

客户端实现

在main.html页面实现前端代码：

var toName;
            var username;
            function showChat(name) {
                toName = name;
                //清除聊天区的数据
                $("#msgs").html("");
                //现在聊天对话框
                $("#chatArea").css("display","inline");
                //显示“正在和谁聊天”
                $("#chatMes").html("正在和 <font face=\"楷体\">"+toName+"</font> 聊天");
    
                //切换用户，需要将聊天记录渲染到聊天区
                var storeData = sessionStorage.getItem(toName);
                if(storeData != null) {
                    $("#msgs").html(storeData);
                }
            }
    
            $(function() {
                $.ajax({
                    url:"getUsername",
                    success:function(res) {
                        username = res;
                        //显示在线信息
                        $("#userName").html(" 用户："+res+"<span style='float: right;color: green'>在线</span>");
                    },
                    async: false
                })
    
                //创建websocket
                var ws;
                if(window.WebSocket) {
                    ws = new WebSocket("ws://localhost/chat");
                }
    
                //绑定事件
                ws.onopen = function(evt) {
                    //显示在线信息
                    $("#userName").html(" 用户："+username+"<span style='float: right;color: green'>在线</span>");
                }
    
                ws.onmessage = function(evt) {
                    //接收服务器推送的消息
                    var data = evt.data;
                    //将该字符串数据转换为json
                    var res = JSON.parse(data);
                    //判断是系统消息还是推送给个人的消息
                    if(res.isSystem) {
                        //系统消息
                        var names = res.message;
                        var userListStr = "";
                        var broadcastStr = "";
                        for(var name of names) {
                            if(name != username) {
                                userListStr += "<li class=\"rel-item\"><a onclick='showChat(\""+name+"\")'>"+name+"</a></li>";
                                broadcastStr += "<li class=\"rel-item\" style=\"color: #9d9d9d;font-family: 宋体\">您的好友 "+name+" 已上线</li>";
                            }
                        }
                        //将数据渲染到页面
                        $("#userlist").html(userListStr);
                        $("#broadcastList").html(broadcastStr);
                    } else {
                        //非系统消息
                        var content = res.message;
    
                        //拼接聊天区展示的数据
                        var str = "<div class=\"msg robot\"><div class=\"msg-left\" worker=\"\"><div class=\"msg-host photo\" style=\"background-image: url(img/avatar/Member002.jpg)\"></div><div class=\"msg-ball\">"+content+"</div></div></div>";
    
    
                        //有可能现在不是和指定用户的聊天框，所以需要进行判断
                        var storeData = sessionStorage.getItem(res.fromName);
                        if(storeData != null) {
                            storeData += str;
                        } else {
                            storeData = str;
                        }
                        sessionStorage.setItem(res.fromName,storeData);
                        if(toName == res.fromName) {
                            //将数据追加到聊天区
                            $("#msgs").append(str);
                        }
                    }
                }
    
                ws.onclose = function() {
                    //显示在线信息
                    $("#userName").html(" 用户："+username+"<span style='float: right;color: red'>离线</span>");
                }
    
                //给发送按钮绑定点击事件
                $("#submit").click(function() {
                    //获取输入的内容
                    var data = $("#context_text").val();
                    //将该文本框清空
                    $("#context_text").val("");
                    //拼接消息
                    var str = "<div class=\"msg guest\"><div class=\"msg-right\"><div class=\"msg-host headDefault\"></div><div class=\"msg-ball\">"+data+"</div></div></div>";
                    $("#msgs").append(str);
                    //将聊天记录进行存储sessionStorage
                    var storeData = sessionStorage.getItem(toName);
                    if(storeData != null) {
                        //将此次的内容拼接到storeData中
                        str = storeData + str;
                    }
                    //将消息存储到sessionStorage中
                    sessionStorage.setItem(toName,str);
    
                    //定义服务端需要的数据格式
                    var message = {toName:toName,message:data};
                    //将输入的数据发送给服务器
                    ws.send(JSON.stringify(message));
                });
            })

服务端代码实现

WebSocketConfig 类实现

开启 springboot 对websocket的支持

@Configuration
    public class WebSocketConfig {
    
        @Bean
        //注入ServerEndpointExporter，自动注册使用@ServerEndpoint注解的
        public ServerEndpointExporter serverEndpointExporter() {
            return new ServerEndpointExporter();
        }
    }

ChatEndPoint 类实现

@ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class)
    @Component
    public class ChatEndpoint {
    
        //用来存储每一个客户端对象对应的ChatEndpoint对象
        private static Map<String,ChatEndpoint> onlineUsers = new ConcurrentHashMap<>();
    
        //和某个客户端连接对象，需要通过他来给客户端发送数据
        private Session session;
    
        //httpSession中存储着当前登录的用户名
        private HttpSession httpSession;
    
        @OnOpen
        //连接建立成功调用
        public void onOpen(Session session, EndpointConfig config) {
            //需要通知其他的客户端，将所有的用户的用户名发送给客户端
            this.session = session;
            //获取HttpSession对象
            HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
            //将该httpSession赋值给成员httpSession
            this.httpSession = httpSession;
            //获取用户名
            String username = (String) httpSession.getAttribute("user");
            //存储该链接对象
            onlineUsers.put(username,this);
            //获取需要推送的消息
            String message = MessageUtils.getMessage(true, null, getNames());
            //广播给所有的用户
            broadcastAllUsers(message);
        }
    
        private void broadcastAllUsers(String message) {
            try {
                //遍历 onlineUsers 集合
                Set<String> names = onlineUsers.keySet();
                for (String name : names) {
                    //获取该用户对应的ChatEndpoint对象
                    ChatEndpoint chatEndpoint = onlineUsers.get(name);
                    //发送消息
                    chatEndpoint.session.getBasicRemote().sendText(message);
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        private Set<String> getNames() {
            return onlineUsers.keySet();
        }
    
        @OnMessage
        //接收到消息时调用
        public void onMessage(String message,Session session) {
            try {
                //获取客户端发送来的数据  {"toName":"张三","message":"你好"}
                ObjectMapper mapper = new ObjectMapper();
                Message mess = mapper.readValue(message, Message.class);
                //获取当前登录的用户名
                String username = (String) httpSession.getAttribute("user");
                //拼接推送的消息
                String data = MessageUtils.getMessage(false, username, mess.getMessage());
                //将数据推送给指定的客户端
                ChatEndpoint chatEndpoint = onlineUsers.get(mess.getToName());
                chatEndpoint.session.getBasicRemote().sendText(data);
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    
        @OnClose
        //连接关闭时调用
        public void onClose(Session session) {
            //获取用户名
            String username = (String) httpSession.getAttribute("user");
            //移除连接对象
            onlineUsers.remove(username);
            //获取需要推送的消息
            String message = MessageUtils.getMessage(true, null, getNames());
            //广播给所有的用户
            broadcastAllUsers(message);
        }
    }

GetHttpSessionConfigurator 配置类实现

public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {
        @Override
        public void modifyHandshake(ServerEndpointConfig config, HandshakeRequest request, HandshakeResponse response) {
            HttpSession httpSession = (HttpSession) request.getHttpSession();
            config.getUserProperties().put(HttpSession.class.getName(),httpSession);
        }
    }

[d9aabe1fdc564b8e8d4bc25b06b06741.png]: https://img-blog.csdnimg.cn/img_convert/d9aabe1fdc564b8e8d4bc25b06b06741.png
[195a7e4379154f4dbb86a3102c9d9a52.png]: https://img-blog.csdnimg.cn/img_convert/195a7e4379154f4dbb86a3102c9d9a52.png
[c125820b8a534346b4dbd83cb45e744f.png]: https://img-blog.csdnimg.cn/img_convert/c125820b8a534346b4dbd83cb45e744f.png
[9df0b79182c54a98a2bc12b4371fab19.png]: https://img-blog.csdnimg.cn/img_convert/9df0b79182c54a98a2bc12b4371fab19.png
[a49db0409e66423195699c66c980c755.png]: https://img-blog.csdnimg.cn/img_convert/a49db0409e66423195699c66c980c755.png
[a1705ba998584d27ab6e4d9e5f1f9c60.png]: https://img-blog.csdnimg.cn/img_convert/a1705ba998584d27ab6e4d9e5f1f9c60.png
[a155aa66506245d5aa70899e7808f4ad.png]: https://img-blog.csdnimg.cn/img_convert/a155aa66506245d5aa70899e7808f4ad.png