基于websocket实现在线聊天

   日期:2024-12-26    作者:gdduozheng 移动:http://oml01z.riyuangf.com/mobile/quote/45549.html

因为http 通信只能由客户端发起,服务器返回查询结果,HTTP 协议做不到服务器主动向客户端推送信息, 服务器有连续的状态变化,客户端要获知就非常麻烦。 我们只能使用轮询:每隔一段时候,就发出一个询问,了解服务器有没有新的信息。最典型的场景就是聊天室。 轮询的效率低,非常浪费资源(因为必须不停连接,或者 HTTP 连接始终打开);

websocket介绍

WebSocket是一种在单个TCP连接上提供全双工通信的协议,它允许客户端和服务器之间进行实时数据传输。与传统的HTTP通信方式不同,WebSocket允许服务器主动向客户端推送数据,而不需要客户端先发起请求。

特点和优势
  1. 全双工通信:WebSocket允许客户端和服务器之间同时发送和接收数据,支持实时性更强的应用场景,如在线聊天、实时通知等。

  2. 更低的延迟:与轮询和长轮询相比,WebSocket减少了每个消息的头部开销,提供了更低的延迟。

  3. 节省带宽和服务器资源:WebSocket连接建立后,客户端和服务器之间的通信通过较少的控制开销和更高的吞吐量进行,节省了带宽和服务器资源。

  4. 支持跨域通信:WebSocket可以通过浏览器的标准API实现跨域通信,提供了更加安全和便捷的方式。

    maven依赖: <dependency> <groupId>javax.websocket</groupId> <artifactId>javax.websocket-api</artifactId> <version>1.1<[胜利]ersion> </dependency>

    前端初始化工作代码

            initWebSocket() {
                    // 获取当前页面的协议、主机和端口
                    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
                    const host = window.location.host;
                    const endpoint = '/websocket_war/echo';
              // 动态生成 WebSocket 的 URL
                const wsUrl = `${protocol}//${host}${endpoint}`;
                console.log(wsUrl);
                // 创建 WebSocket 连接
                var ws = new WebSocket(wsUrl);
            ws.onopen = function () {
                console.log('WebSocket 连接已经建立。');
                // ws.send('Hello, server!');
            };
    ​
            ws.onmessage = function (event) {
                console.log('收到服务器消息', event.data);
            };
    ​
            ws.onerror = function (event) {
                console.error('WebSocket 连接出现错误', event);
            };
    ​
            ws.onclose = function () {
                console.log('WebSocket 连接已经关闭。');
            };
    ​
            window.onbeforeunload = function() {
                app.$data.ws.close();
            };
    ​
            this.ws = ws;
        }

    后端代码

    import javax.websocket.*;
    import javax.websocket.server.ServerEndpoint;
    import java.io.IOException;
     
    @ServerEndpoint("/echo")
    public class AdminEchoServer {
        private static Session session;
     
        @OnOpen
        public void onOpen(Session session) {
            System.out.println("WebSocket 连接已经建立。");
            AdminEchoServer.session = session;
        }
     
        @OnMessage
        public void onMessage(String message, Session session) throws IOException {
            System.out.println("收到客户端消息" + message);
            //session.getBasicRemote().sendText("服务器收到消息" + message);
        }
     
        @OnClose
        public void onClose() {
            System.out.println("WebSocket 连接已经关闭。");
        }
     
        @OnError
        public void onError(Throwable t) {
            System.out.println("WebSocket 连接出现错误" + t.getMessage());
        }
    ​
        public void send(String message) throws IOException {
            session.getBasicRemote().sendText(message);
        }
    ​
    }

建议将聊天的内容存储到redis中的有序集合中,利用时间戳作为有序集合的分数


特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。


举报收藏 0评论 0
0相关评论
相关最新动态
推荐最新动态
点击排行
{
网站首页  |  关于我们  |  联系方式  |  使用协议  |  隐私政策  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号