亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

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

microelec / 3078人閱讀

摘要：上節(jié)課完成了的后端搭建，搞定了簡(jiǎn)單的請(qǐng)求響應(yīng)，今天來(lái)結(jié)合前端來(lái)完成群聊功能。其實(shí)后端群聊很簡(jiǎn)單，就是把一個(gè)用戶的輸入消息，返回給所有在線客戶端，前端去負(fù)責(zé)篩選顯示。

上節(jié)課完成了netty的后端搭建，搞定了簡(jiǎn)單的http請(qǐng)求響應(yīng)，今天來(lái)結(jié)合前端websocket來(lái)完成群聊功能。話不多說(shuō)先上圖：
前端構(gòu)建

不使用復(fù)雜構(gòu)建工具直接靜態(tài)頁(yè)面走起

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

主體部分


    
mike多人聊天室，等你來(lái)聊

    

  

    

      
        
      
      

        
其他人

        
其他人的聊天內(nèi)容

      

    


    

      
        
      
      

        
我

        
我說(shuō)話的內(nèi)容

引入依賴js

websocket的js代碼以及業(yè)務(wù)代碼

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

后端服務(wù)改造

ChatHandler改造，判斷websocket響應(yīng)

    /**
     * 讀取客戶端發(fā)送的消息，并將信息轉(zhuǎn)發(fā)給其他客戶端的 Channel。
     */
    @Override
    protected void channelRead0(ChannelHandlerContext ctx, Object  request) throws Exception {
           if (request instanceof FullHttpRequest) { //是http請(qǐng)求
               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請(qǐng)求
               String userId = ctx.channel().id().asLongText();
               System.out.println("收到客戶端"+userId+":"+((TextWebSocketFrame)request).text());
               //發(fā)送消息給所有客戶端
               channels.writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
               //發(fā)送給單個(gè)客戶端
               //ctx.channel().writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
           }
    }

*　ChatServerInitializer改造，加入WebSocket

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

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

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

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

啟動(dòng)后端服務(wù)，訪問(wèn)你的前端靜態(tài)頁(yè)面就可以和小伙伴聊天了。其實(shí)后端群聊很簡(jiǎn)單，就是把一個(gè)用戶的輸入消息，返回給所有在線客戶端，前端去負(fù)責(zé)篩選顯示。自己動(dòng)手照著搞１０分鐘就能完成。

實(shí)現(xiàn)功能

輸入聊天昵稱開(kāi)始聊天

聊天消息不為空才能發(fā)送

發(fā)送完自動(dòng)清空輸入，且聚焦輸入框

自己的消息顯示在左側(cè)，其他人的消息在右側(cè)

別忘了關(guān)注我 mike啥都想搞

求關(guān)注啊。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/73158.html

相關(guān)文章

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

    摘要：開(kāi)始聊天發(fā)送聊天信息時(shí)消息，這樣后端就知道是誰(shuí)要發(fā)給誰(shuí)，根據(jù)用戶名去找到具體的線程去單獨(dú)推送消息，實(shí)現(xiàn)單聊。前端待完善左側(cè)聊天列表沒(méi)有實(shí)現(xiàn)，每搜索一個(gè)在線用戶，應(yīng)該動(dòng)態(tài)顯示在左側(cè)，點(diǎn)擊該用戶，動(dòng)態(tài)顯示右側(cè)聊天窗口進(jìn)行消息發(fā)送。 上節(jié)課講了群聊，這次來(lái)說(shuō)說(shuō)單聊，單聊要比群聊復(fù)雜點(diǎn)，但是代碼也不是很多，主要是前端顯示比較麻煩點(diǎn)。 效果：showImg(https://segmentfaul...

    Lavender 評(píng)論0 收藏0

  • InChat一版，僅僅兩個(gè)接口實(shí)現(xiàn)自己的IM系統(tǒng)（可兼容）

    摘要：大家明天一起去唱吧關(guān)于數(shù)據(jù)庫(kù)設(shè)計(jì)當(dāng)前一版不會(huì)固定大家的數(shù)據(jù)庫(kù)設(shè)計(jì)，大家可以自己自由設(shè)計(jì)，同時(shí)搭上自己的項(xiàng)目，構(gòu)建一個(gè)附帶的自項(xiàng)目。 InChat 一個(gè)IM通訊框架 一個(gè)輕量級(jí)、高效率的支持多端（應(yīng)用與硬件Iot）的異步網(wǎng)絡(luò)應(yīng)用通訊框架。（核心底層Netty） Github：InChat 版本目標(biāo)：完成基本的消息通訊（僅支持文本消息），離線消息存儲(chǔ)，歷史消息查詢，一對(duì)一聊天、自我聊天、群...

    CrazyCodes 評(píng)論0 收藏0

  • 用Java構(gòu)建一個(gè)簡(jiǎn)單的WebSocket聊天項(xiàng)目之新增HTTP接口調(diào)度

    摘要：前言大家可以看看上一篇用構(gòu)建一個(gè)簡(jiǎn)單的聊天室在上一篇文章中我們已經(jīng)實(shí)現(xiàn)了自我對(duì)話好友交流群聊離線消息等的功能。系統(tǒng)通知恭喜您連續(xù)登錄超過(guò)天，獎(jiǎng)勵(lì)積分。 本文首發(fā)公眾號(hào)與個(gè)人博客：Java貓說(shuō) & 貓叔的博客 | MySelf，轉(zhuǎn)載請(qǐng)申明出處。 前言 大家可以看看上一篇：用Java構(gòu)建一個(gè)簡(jiǎn)單的WebSocket聊天室 在上一篇文章中我們已經(jīng)實(shí)現(xiàn)了：自我對(duì)話、好友交流、群聊、離線消息等...

    vvpvvp 評(píng)論0 收藏0

  • netty搭建web聊天室（1）

    摘要：提供異步的事件驅(qū)動(dòng)的網(wǎng)絡(luò)應(yīng)用程序框架和工具，用以快速開(kāi)發(fā)高性能高可靠性的網(wǎng)絡(luò)服務(wù)器和客戶端程序?？偨Y(jié)我們完成了服務(wù)端的簡(jiǎn)單搭建，模擬了聊天會(huì)話場(chǎng)景。 之前一直在搞前端的東西，都快忘了自己是個(gè)java開(kāi)發(fā)。其實(shí)還有好多java方面的東西沒(méi)搞過(guò)，突然了解到netty，覺(jué)得有必要學(xué)一學(xué)。 介紹 Netty是由JBOSS提供的一個(gè)java開(kāi)源框架。Netty提供異步的、事件驅(qū)動(dòng)的網(wǎng)絡(luò)應(yīng)用程序框...

    izhuhaodev 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<