基于WebSocket的网页聊天室

1基于WebSocket的网页聊天室

---

1.1 需求

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

1）. 登陆聊天室

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

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

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

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

李四 的界面如下：

1.2 实现流程

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>
    
    <!--devtools热部署-->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
        <scope>true</scope>
    </dependency>
</dependencies>

<build>
    <plugins>
        <!-- 打jar包时如果不配置该插件，打出来的jar包没有清单文件 -->
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

1.4.2 引入静态资源文件

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);
    }
}