netty搭建web聊天室（2）群聊

microelec 發布于2019-08-16 14:42 / 2983人閱讀

摘要：上節課完成了的后端搭建，搞定了簡單的請求響應，今天來結合前端來完成群聊功能。其實后端群聊很簡單，就是把一個用戶的輸入消息，返回給所有在線客戶端，前端去負責篩選顯示。

上節課完成了netty的后端搭建，搞定了簡單的http請求響應，今天來結合前端websocket來完成群聊功能。話不多說先上圖：

前端構建

不使用復雜構建工具直接靜態頁面走起

使用了zui樣式庫 http://zui.sexy/?#/，非常不錯，有好多模板。我使用的是聊天模板改造

主體部分


    mike多人聊天室，等你來聊
    
  
    
      
        
      
      
        其他人
        其他人的聊天內容
      
    

    
      
        
      
      
        我
        我說話的內容
      
    
  
  
    
      
          
      
            
            昵稱:

引入依賴js

websocket的js代碼以及業務代碼

都有注釋就不解釋了自己看

后端服務改造

ChatHandler改造，判斷websocket響應

    /**
     * 讀取客戶端發送的消息，并將信息轉發給其他客戶端的 Channel。
     */
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, Object  request) throws Exception {
           if (request instanceof FullHttpRequest) { //是http請求
               FullHttpResponse response = new DefaultFullHttpResponse(
                        HttpVersion.HTTP_1_1,HttpResponseStatus.OK , Unpooled.wrappedBuffer("Hello netty"
                                .getBytes()));
                response.headers().set("Content-Type", "text/plain");
                response.headers().set("Content-Length", response.content().readableBytes());
                response.headers().set("connection", HttpHeaderValues.KEEP_ALIVE);
                ctx.channel().writeAndFlush(response);
           } else if (request instanceof TextWebSocketFrame) { // websocket請求
               String userId = ctx.channel().id().asLongText();
               System.out.println("收到客戶端"+userId+":"+((TextWebSocketFrame)request).text());
               //發送消息給所有客戶端
               channels.writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
               //發送給單個客戶端
               //ctx.channel().writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
           }
    }

*　ChatServerInitializer改造，加入WebSocket

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
            ChannelPipeline pipeline = ch.pipeline();
          //websocket協議本身是基于http協議的，所以這邊也要使用http解編碼器
            pipeline.addLast(new HttpServerCodec());
            //以塊的方式來寫的處理器
            pipeline.addLast(new ChunkedWriteHandler());
            //netty是基于分段請求的，HttpObjectAggregator的作用是將請求分段再聚合,參數是聚合字節的最大長度
            pipeline.addLast(new HttpObjectAggregator(1024*1024*1024));

            //ws://server:port/context_path
            //ws://localhost:9999/ws
            //參數指的是contex_path
            pipeline.addLast(new WebSocketServerProtocolHandler("/ws",null,true,65535));

            //自定義handler
            pipeline.addLast(new ChatHandler());

            System.out.println("ChatClient:"+ch.remoteAddress() +"連接上");
        
    }

改造完成

啟動后端服務，訪問你的前端靜態頁面就可以和小伙伴聊天了。其實后端群聊很簡單，就是把一個用戶的輸入消息，返回給所有在線客戶端，前端去負責篩選顯示。自己動手照著搞１０分鐘就能完成。

實現功能

輸入聊天昵稱開始聊天

聊天消息不為空才能發送

發送完自動清空輸入，且聚焦輸入框

自己的消息顯示在左側，其他人的消息在右側

別忘了關注我 mike啥都想搞

求關注啊。

GPU云服務器云服務器 netty語音聊天 web即時聊天 Web聊天服務器 webrtc搭建聊天室

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/73158.html

netty搭建web聊天室（3）單聊

摘要：開始聊天發送聊天信息時消息，這樣后端就知道是誰要發給誰，根據用戶名去找到具體的線程去單獨推送消息，實現單聊。前端待完善左側聊天列表沒有實現，每搜索一個在線用戶，應該動態顯示在左側，點擊該用戶，動態顯示右側聊天窗口進行消息發送。上節課講了群聊，這次來說說單聊，單聊要比群聊復雜點，但是代碼也不是很多，主要是前端顯示比較麻煩點。效果：showImg(https://segmentfaul...

Lavender 2019-08-23 14:55 評論0 收藏0
InChat一版，僅僅兩個接口實現自己的IM系統（可兼容）

摘要：大家明天一起去唱吧關于數據庫設計當前一版不會固定大家的數據庫設計，大家可以自己自由設計，同時搭上自己的項目，構建一個附帶的自項目。 InChat 一個IM通訊框架一個輕量級、高效率的支持多端（應用與硬件Iot）的異步網絡應用通訊框架。（核心底層Netty） Github：InChat 版本目標：完成基本的消息通訊（僅支持文本消息），離線消息存儲，歷史消息查詢，一對一聊天、自我聊天、群...

CrazyCodes 2019-08-16 13:59 評論0 收藏0
用Java構建一個簡單的WebSocket聊天項目之新增HTTP接口調度

摘要：前言大家可以看看上一篇用構建一個簡單的聊天室在上一篇文章中我們已經實現了自我對話好友交流群聊離線消息等的功能。系統通知恭喜您連續登錄超過天，獎勵積分。本文首發公眾號與個人博客：Java貓說 & 貓叔的博客 | MySelf，轉載請申明出處。前言大家可以看看上一篇：用Java構建一個簡單的WebSocket聊天室在上一篇文章中我們已經實現了：自我對話、好友交流、群聊、離線消息等...

vvpvvp 2019-08-16 14:10 評論0 收藏0
netty搭建web聊天室（1）

摘要：提供異步的事件驅動的網絡應用程序框架和工具，用以快速開發高性能高可靠性的網絡服務器和客戶端程序。總結我們完成了服務端的簡單搭建，模擬了聊天會話場景。之前一直在搞前端的東西，都快忘了自己是個java開發。其實還有好多java方面的東西沒搞過，突然了解到netty，覺得有必要學一學。介紹 Netty是由JBOSS提供的一個java開源框架。Netty提供異步的、事件驅動的網絡應用程序框...

izhuhaodev 2019-08-16 14:37 評論0 收藏0