基于 WebSocket 打造聊天室

关注

原创最新推荐文章于 2026-07-02 12:21:45 发布 1.5k 阅读 AI 写同款· GEO 优化 ›

WebSocket 入门：简易聊天室 大家好，我是前端西瓜哥，今天我们用 WebSocket 来实现一个简单的聊天室。WebSocket 是一个应用层协议，有点类似 HTTP。但和 HTTP 不一样的是，它支持真正的全双工，即不仅客户端可以主动发消息给服务端，服务端也可以主动发消息给客户端。尤其是后者，让我们不用再基于 HTTP 长轮询或短轮询的低效方式来实现服务端通知。相比 HTTP，WebSocket 的服务端推送更轻量，并能减少服务端的压力。阅读详情

一、什么是 WebSocket？

WebSocket 是一种基于TCP连接上进行 全双工 通信的协议。WebSocket使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。
在这里插入图片描述

二、WebSocket 的应用场景

WebSocket 的特点，决定了他在一些 实时双向通信、低延迟、推送等功能的应用场景下的独特优势。

在WebSocket 出现之前，Web 程序想要进行实时通信是非常麻烦的，因为 HTTP 是一种无状态、无连接、单向的应用层协议，它无法实现服务器主动向客户端推送消息，并且这种单向请求的特点，注定了客户端实时获取服务端的变化就非常麻烦，通常情况下，需要客户端频繁的对服务器进行轮询，这种方式不仅效率低，实时性不好，而且这种频繁的请求和响应对服务器来说也是一种负担。

三、WebSocket API

1、客户端/浏览器 API

由于 WebSocket 协议是 HTML5开始支持的，所以想要使用 WebSocket 协议，首先保证浏览器支持 HTML5.

websocket 对象创建

let ws = new WebSocket(URL);

注：这里的 url 格式为 协议://ip地址:端口号/访问路径。协议名称固定为 ws

websocket 事件

事件	事件处理程序	描述
open	ws.onopen	连接建立时触发
message	ws.onmessage	客户端接收服务端数据时触发
error	ws.onerror	通信发生错误时触发
close	ws.onclose	连接关闭时触发

websocket 方法

方法	描述
ws.send()	使用连接发送数据到服务器
ws.close()	关闭连接

2、服务端 API

Tomcat 从 7.0.5 版本开始支持 WebSocket，所以使用时注意 Tomcat 版本不能低于 7.0.5。在Java中，Endpoint 表示服务器 Websocket 连接的一端，可以视之为处理WebSocket消息的接口。Java 中可以通过两种方式定义Endpoint：

编程式：通过继承 javax.websocket.Endpoint并实现其方法。
注解式：通过添加 @ServerEndpoint 等相关注解。

Endpoint 实例在 WebSocket 握手时创建，并在客户端与服务端连接过程中有效，在连接关闭时结束，在Endpoint接口中就定义了其生命周期的相关方法：

方法	注解	描述
onOpen	@OnOpen注解所标识的方法	连接建立时触发
onError	@OnError注解所标识的方法	通信发生错误时触发
onClose	@OnClose注解所标识的方法	连接关闭时触发

在 onOpen 方法中，将创建一个 Session 对象，表示当前 WebSocket 连接的会话，Session对象提供了一组方法，用于管理WebSocket连接和事件。例如：

服务端向客户端发送数据：

如果使用编程式的话，可以通过 Session 添加 MessageHandler 消息处理器来接收消息；如果采用注解式，可以在定义的 Endpoint 类中添加 @OnMessage 注解指定接收消息的方法。

服务端将数据推送给客户端：

在 Session 中维护了一个 RemoteEndpoint 实例，用来向客户端推送数据，我们可以通过 Session.getBasicRemote 获取同步消息发送实例，通过 Session.getAsyncRemote 获取异步消息发送实例，然后调用实例中的 sendXXX() 方法即可发送消息。

四、使用 webSocket 实现在线聊天室

上面说了那么多理论知识，主要是为了让大家对Websocket有个最基本的认识，下面就通过一个具体的场景《在线聊天室》来体会一下 Websocket 在实际中如何使用。

1、需求分析

这里我们实现的聊天室是比较简单的，主要功能就是能够实现实时消息的发送和接收，能够实时显示用户在线状态和在线人数。下面简单演示一下成品效果：

2、实现流程

3、消息格式

这里约定前后端的消息数据格式采用 json 格式进行传输。主要分为两大类消息：

客户端–>服务器：

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

服务器–>客户端：

{"isSystem":true,"fromName":null,"message":["张三","李四"] }
{"isSystem":false,"fromName":"张三","message":"你好" }

4、服务端功能实现

这部分我会详细介绍一下使用 websocket，后端如何进行api编写，至于登录功能，可以说是千篇一律，这里直接给出代码，不作为重点，也就不在展开介绍了。

（1）导入依赖
首先我们需要创建 SpringBoot 项目并导入 websocket 相关依赖：

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-websocket</artifactId>
</dependency>

（2）登录模块实现
登录功能不是本次实现的重点，所以这里只是对密码进行了一个简单的校验，不涉及到数据库交互操作。

@RestController
@RequestMapping("/user")
public class UserController {
    /**
     * 登录
     * @param user 提交的用户名和密码
     * @param httpSession 提交的
     * @return 成功信息
     */
    @PostMapping("/login")
    public Result login(User user, HttpSession httpSession) {
        if (user != null && (user.getPassword()).equals("123")) {
            // 将用户数据存储到session中
            httpSession.setAttribute("user",user.getUsername());
            System.out.println(httpSession);
            return Result.success("登录成功");
        } else {
            return Result.failed();
        }
    }

    /**
     * 获取当前登录的用户名
     * @return 用户名
     */
    @GetMapping("/getusername")
    public Result login(HttpSession httpSession) {
        String username = (String) httpSession.getAttribute("user");
        return Result.success(username);
    }

}

（3）聊天室功能实现

@Component
@ServerEndpoint(value = "/chat",configurator = GetHttpSessionConfigurator.class)
public class ChatEndpoint {
    // 用来存储每一个客户端对象对应的ChatEndpoint对象
    private static ConcurrentHashMap<String,ChatEndpoint> onlineClient = new ConcurrentHashMap<>();
    // 声明session对象，通过该对象可以发生消息给指定的客户端
    private Session session;
    // 声明Httpsession对象，里面记录了用户相关信息
    private HttpSession httpSession;

    /**
     * 连接建立时调用
     * @param session 当前连接的会话
     * @param config Endpoint的配置对象
     */
    @OnOpen
    public void onOpen(Session session,EndpointConfig config) {
        try {
            // 初始化当前Endpoint的链接会话
            this.session = session;
            // 初始化httpSession
            HttpSession httpSession = (HttpSession) config.getUserProperties().get(HttpSession.class.getName());
            this.httpSession = httpSession;
            // 将当前连接的ChatEndpoint对象存储到onlineClient容器中
            String username = (String) httpSession.getAttribute("user");
            onlineClient.put(username,this);
            // 将在线用户推送给所有客户端
            // 1.获取消息
            String message = MessageUtils.getMessage(true, null, getNames());
            // 2.将消息广播给所有用户
            broadcastAllUsers(message);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private void broadcastAllUsers(String message) {
        Set<String> names = getNames();
        try {
            for (String name : names) {
                // 获取当前用户的ChatEndpoint对象
                ChatEndpoint client = onlineClient.get(name);
                // 使用session发送信息
                client.session.getBasicRemote().sendText(message);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    private Set<String> getNames() {
        return onlineClient.keySet();
    }

    /**
     * 接收到客户端数据后调用
     * @param message 消息信息
     * @param session 当前连接的会话
     */
    @OnMessage
    public void onMessage(String message,Session session) {
        try {
            // 导入jackson核心类
            ObjectMapper objectMapper = new ObjectMapper();
            // 将JSON字符串序列化为Message对象
            Message mess = objectMapper.readValue(message, Message.class);
            // 取出接收人
            String toName = mess.getToName();
            // 取出信息
            String sendMess = mess.getMessage();
            // 找到发送人姓名
            String fromName = (String) httpSession.getAttribute("user");
            // 进行消息构造
            String finalMess = MessageUtils.getMessage(false, fromName, sendMess);
            // 根据接收人找到对应的连接
            ChatEndpoint chatEndpoint = onlineClient.get(toName);
            if (chatEndpoint == null) {
                // 这里可以抛出异常
                // ...
                // 打印日志
                System.out.println("找不到对应的客户端！userName = "+toName);
                return;
            }
            // 使用对应的会话Session发送给对应的客户端
            chatEndpoint.session.getBasicRemote().sendText(finalMess);

        } catch (Exception e) {
            e.printStackTrace();
        }


    }

    /**
     * 连接过程中发生错误时调用
     */
    @OnError
    public void onError(Session session, Throwable error) {
        System.out.println("websocket连接出错，错误原因:"+error.getMessage());
    }

    /**
     * 关闭连接时调用
     */
    @OnClose
    public void onClose(Session session) {
        try {
            // 1.清除容器中的该ChatEndpoint对象
            String username = (String) httpSession.getAttribute("user");
            onlineClient.remove(username);
            // 2.向所有客户端广播下线通知
            Set<String> names = getNames();
            // 3.构造消息
            String message = MessageUtils.getMessage(true,null,getNames());
            // 4.广播给其他用户
            broadcastAllUsers(message);

        } catch (Exception e) {
            e.printStackTrace();
        }
    }
}

需要注意的是：

事实上当@Component注解和@ServerEndpoint(“/chat”)注解同时使用时，Spring并不会将ChatEndpoint这个类注册为服务器的端点，我们还需要需要注册一个 ServerEndpointExporter bean，它会自动扫描带有@ServerEndpoint注解的类，并将其注册为WebSocket端点，以便客户端可以连接和通信：

@Configuration
public class WebSocketConfig {
    @Bean
    public ServerEndpointExporter serverEndpointExporter() {
        return new ServerEndpointExporter();
    }
}

在WebSocket中，每次客户端与服务器建立连接时，都会创建一个新的ChatEndpoint实例来处理该连接。因此，每个WebSocket连接都有其自己的ChatEndpoint实例，this指向的是当前连接对应的实例，所以在ChatEndpoint类中使用了一个static类型的集合将所有的连接记录起来，便于之后的消息处理。
在客户端与服务端建立连接时，上述的静态集合中是以键-值方式存储每个客户端的ChatEndpoint实例的，为了区分，这里以登录的用户名作为键，所以需要获取到HttpSession，再从Httpsession中获取到用户名，但是在OnOpen方法中无法直接获取当前登录的 Httpsession，此时我们可以借助OnOpen中的另一个参数 EndpointConfig config，将Httpsession存储到EndpointConfig对象中，在从EndpointConfig对象中获取到Httpsession，因此我们需要进行如下配置：

public class GetHttpSessionConfigurator extends ServerEndpointConfig.Configurator {
    @Override
    public void modifyHandshake(ServerEndpointConfig sec,
     							HandshakeRequest request, 
     							HandshakeResponse response) {
        // 获取到httpSession
        HttpSession httpSession = (HttpSession) request.getHttpSession();
        // 将httpSession存储到EndpointConfig中
        sec.getUserProperties().put(HttpSession.class.getName(),httpSession);
    }
}

5、客户端交互功能实现

客户端这里主要介绍一下前后端交互的逻辑，具体页面实现我们暂时不关心。
（1）登录页面前后端交互
登录页面的前后端交互主要采用 jQuery 发送 Ajax 请求完成，整体思路很简单，这里给出 js 代码：

<script>
    function login(){
        // 1.参数校验
        var username = jQuery("#username");
        var password = jQuery("#password");
        if (username.val().trim() == "") {
            username.focus();
            alert("请输入用户名!")
            return false;
        }
        if (password.val().trim() == "") {
            username.focus();
            alert("请输入密码!");
            return false;
        }
        // 2.将参数提交给后端
        jQuery.ajax({
            url:"/user/login",
            type:"POST",
            data:{
                "username":username.val().trim(),
                "password":password.val().trim()
            },
            success:function(res) {
            console.log(res);
                // 3.将结果返回给用户
                if (res.flag) {
                    // 登录成功!
                    // alert("登录成功!");
                    // 跳转到主页
                    location.href="main.html";
                } else {
                    // 登录失败!
                    alert("登录失败，用户名或密码错误！");
                }
            }
        });
    }
</script>

（2）聊天页面的前后端交互
在聊天页面这里，使用到 vue 进行处理，可能理解起来稍微有点复杂，大家可以自行参考：

<body>
<div class="abs cover contaniner" id="app">
    <div class="abs cover pnl">
        <div class="top pnl-head" style="padding: 20px ; color: white;">
            <div id="userName">
                用户：{{username}}
                <span style='float: right;color: green' v-if="isOnline">在线</span>
                <span style='float: right;color: red' v-else>离线</span>
            </div>
            <div id="chatMes" v-show="chatMes" style="text-align: center;color: #6fbdf3;font-family: 新宋体">
                正在和 <font face="楷体">{{toName}}</font> 聊天
            </div>
        </div>
        <!--聊天区开始-->
        <div class="abs cover pnl-body" id="pnlBody">
            <div class="abs cover pnl-left" id="initBackground" style="background-color: white; width: 100%">
                <div class="abs cover pnl-left" id="chatArea" v-show="isShowChat">
                    <div class="abs cover pnl-msgs scroll" id="show">
                        <div class="pnl-list" id="hists"><!-- 历史消息 --></div>
                        <div class="pnl-list" id="msgs" v-for="message in historyMessage">

                            <!-- 消息这展示区域 -->
                            <div class="msg guest" v-if="message.toName">
                                <div class="msg-right">
                                    <div class="msg-host headDefault"></div>
                                    <div class="msg-ball">{{message.message}}</div>
                                </div>
                            </div>
                            <div class="msg robot" v-else>
                                <div class="msg-left" worker="">
                                    <div class="msg-host photo"
                                         style="background-image: url(img/avatar/Member002.jpg)"></div>
                                    <div class="msg-ball">{{message.message}}</div>
                                </div>
                            </div>

                        </div>
                    </div>



                    <div class="abs bottom pnl-text">
                        <div class="abs cover pnl-input">
                            <textarea class="scroll" id="context_text" @keyup.enter="submit" wrap="hard" placeholder="在此输入文字信息..."
                                      v-model="sendMessage.message"></textarea>
                            <div class="abs atcom-pnl scroll hide" id="atcomPnl">
                                <ul class="atcom" id="atcom"></ul>
                            </div>
                        </div>

                        <div class="abs br pnl-btn" id="submit" @click="submit"
                             style="background-color: rgb(32, 196, 202); color: rgb(255, 255, 255);">
                            发送
                        </div>
                        <div class="pnl-support" id="copyright"><a href="https://blog.youkuaiyun.com/LEE180501?spm=1000.2115.3001.5343">仅供学习参考</a></div>
                    </div>
                </div>

                <!--聊天区 结束-->
                <div class="abs right pnl-right">
                    <div class="slider-container hide"></div>
                    <div class="pnl-right-content">
                        <div class="pnl-tabs">
                            <div class="tab-btn active" id="hot-tab">好友列表</div>
                        </div>
                        <div class="pnl-hot">
                            <ul class="rel-list unselect">
                                <li class="rel-item" v-for="friend in friendsList"><a @click='showChat(friend)'>{{friend}}</a>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div class="pnl-right-content">
                        <div class="pnl-tabs">
                            <div class="tab-btn active">系统广播</div>
                        </div>
                        <div class="pnl-hot">
                            <ul class="rel-list unselect" id="broadcastList">
                                <li class="rel-item" style="color: #9d9d9d;font-family: 宋体" v-for="name in systemMessages">您的好友
                                    {{name}} 已上线</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="js/vue.js"></script>
<script src="js/axios-0.18.0.js"></script>
<script>
    let ws;
    new Vue({
        el: "#app",
        data() {
            return {
                isShowChat: false,
                chatMes: false,
                isOnline: true,
                username:"",
                toName: "",
                sendMessage: {
                    toName: "",
                    message: ""
                },
                inputMessage: "",
                historyMessage: [

                ],
                friendsList: [

                ],
                systemMessages : [

                ]
            }
        },
        created() {
            this.init();
        },
        methods: {
            async init() {
                await axios.get("user/getusername").then(res => {
                    this.username = res.data.message;
                });

                //创建webSocket对象
                ws = new WebSocket("ws://127.0.0.1:8080/chat");

                //给ws绑定事件
                ws.onopen = this.onopen;
                //接收到服务端推送的消息后触发
                ws.onmessage = this.onMessage;

                ws.onclose = this.onClose;
            },
            showChat(name) {
                this.toName = name;
                //清除聊天区的数据
                let history = sessionStorage.getItem(this.toName);
                if (!history) {
                    this.historyMessage = [];
                } else {
                    this.historyMessage = JSON.parse(history);
                }
                //展示聊天对话框
                this.isShowChat = true;
                //显示“正在和谁聊天”
                this.chatMes = true;
            },
            submit() {
                this.sendMessage.toName = this.toName;
                this.historyMessage.push(JSON.parse(JSON.stringify(this.sendMessage)));
                sessionStorage.setItem(this.toName, JSON.stringify(this.historyMessage));
                ws.send(JSON.stringify(this.sendMessage));
                this.sendMessage.message = "";
            },
            onOpen() {
                this.isOnline = true;
            },
            onClose() {
                sessionStorage.clear();
                this.isOnline = false;
            },
            onMessage(evt) {
                //获取服务端推送过来的消息
                var dataStr = evt.data;
                //将dataStr 转换为json对象
                var res = JSON.parse(dataStr);

                //判断是否是系统消息
                if(res.system) {
                    //系统消息  好友列表展示
                    var names = res.message;
                    this.friendsList = [];
                    this.systemMessages = [];
                    for (let i = 0; i < names.length; i++) {
                        if(names[i] != this.username) {
                            this.friendsList.push(names[i]);
                            this.systemMessages.push(names[i]);
                        }
                    }
                }else {
                    //非系统消息
                    var history = sessionStorage.getItem(res.fromName);
                    if (res.fromName == this.toName) {
                        if (!history) {
                            this.historyMessage = [res];
                        } else {
                            this.historyMessage.push(res);
                        }
                        sessionStorage.setItem(res.fromName, JSON.stringify(this.historyMessage));
                    } else {
                        if (!history) {
                            sessionStorage.setItem(res.fromName, JSON.stringify([res]));
                        } else {
                            let messages = JSON.parse(history);
                            messages.push(res);
                            sessionStorage.setItem(res.fromName, JSON.stringify(messages));
                        }
                    }

                }
            }
        }
    });
</script>