其他人
其他人的聊天內(nèi)容
資訊專欄INFORMATION COLUMN
摘要：上節(jié)課完成了的后端搭建，搞定了簡單的請求響應(yīng)，今天來結(jié)合前端來完成群聊功能。其實后端群聊很簡單，就是把一個用戶的輸入消息，返回給所有在線客戶端，前端去負責(zé)篩選顯示。
上節(jié)課完成了netty的后端搭建，搞定了簡單的http請求響應(yīng)，今天來結(jié)合前端websocket來完成群聊功能。話不多說先上圖：前端構(gòu)建
不使用復(fù)雜構(gòu)建工具直接靜態(tài)頁面走起
使用了zui樣式庫 http://zui.sexy/?#/，非常不錯，有好多模板。我使用的是聊天模板改造
主體部分
mike多人聊天室，等你來聊
引入依賴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請求
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());
//發(fā)送消息給所有客戶端
channels.writeAndFlush(new TextWebSocketFrame(((TextWebSocketFrame)request).text()));
//發(fā)送給單個客戶端
//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());
//以塊的方式來寫的處理器
pipeline.addLast(new ChunkedWriteHandler());
//netty是基于分段請求的，HttpObjectAggregator的作用是將請求分段再聚合,參數(shù)是聚合字節(jié)的最大長度
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() +"連接上");
}
改造完成
啟動后端服務(wù)，訪問你的前端靜態(tài)頁面就可以和小伙伴聊天了。其實后端群聊很簡單，就是把一個用戶的輸入消息，返回給所有在線客戶端，前端去負責(zé)篩選顯示。自己動手照著搞１０分鐘就能完成。
實現(xiàn)功能輸入聊天昵稱開始聊天
聊天消息不為空才能發(fā)送
發(fā)送完自動清空輸入，且聚焦輸入框
自己的消息顯示在左側(cè)，其他人的消息在右側(cè)
別忘了關(guān)注我 mike啥都想搞
求關(guān)注啊。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/73158.html
摘要：開始聊天發(fā)送聊天信息時消息，這樣后端就知道是誰要發(fā)給誰，根據(jù)用戶名去找到具體的線程去單獨推送消息，實現(xiàn)單聊。前端待完善左側(cè)聊天列表沒有實現(xiàn)，每搜索一個在線用戶，應(yīng)該動態(tài)顯示在左側(cè)，點擊該用戶，動態(tài)顯示右側(cè)聊天窗口進行消息發(fā)送。 上節(jié)課講了群聊，這次來說說單聊，單聊要比群聊復(fù)雜點，但是代碼也不是很多，主要是前端顯示比較麻煩點。 效果：showImg(https://segmentfaul...
摘要：大家明天一起去唱吧關(guān)于數(shù)據(jù)庫設(shè)計當(dāng)前一版不會固定大家的數(shù)據(jù)庫設(shè)計，大家可以自己自由設(shè)計，同時搭上自己的項目，構(gòu)建一個附帶的自項目。 InChat 一個IM通訊框架 一個輕量級、高效率的支持多端（應(yīng)用與硬件Iot）的異步網(wǎng)絡(luò)應(yīng)用通訊框架。（核心底層Netty） Github：InChat 版本目標(biāo)：完成基本的消息通訊（僅支持文本消息），離線消息存儲，歷史消息查詢，一對一聊天、自我聊天、群...
摘要：前言大家可以看看上一篇用構(gòu)建一個簡單的聊天室在上一篇文章中我們已經(jīng)實現(xiàn)了自我對話好友交流群聊離線消息等的功能。系統(tǒng)通知恭喜您連續(xù)登錄超過天，獎勵積分。 本文首發(fā)公眾號與個人博客：Java貓說 & 貓叔的博客 | MySelf，轉(zhuǎn)載請申明出處。 前言 大家可以看看上一篇：用Java構(gòu)建一個簡單的WebSocket聊天室 在上一篇文章中我們已經(jīng)實現(xiàn)了：自我對話、好友交流、群聊、離線消息等...
摘要：提供異步的事件驅(qū)動的網(wǎng)絡(luò)應(yīng)用程序框架和工具，用以快速開發(fā)高性能高可靠性的網(wǎng)絡(luò)服務(wù)器和客戶端程序?？偨Y(jié)我們完成了服務(wù)端的簡單搭建，模擬了聊天會話場景。 之前一直在搞前端的東西，都快忘了自己是個java開發(fā)。其實還有好多java方面的東西沒搞過，突然了解到netty，覺得有必要學(xué)一學(xué)。 介紹 Netty是由JBOSS提供的一個java開源框架。Netty提供異步的、事件驅(qū)動的網(wǎng)絡(luò)應(yīng)用程序框...
閱讀 1183·2021-09-27 13:34
閱讀 993·2021-09-13 10:25
閱讀 519·2019-08-30 15:52
閱讀 3457·2019-08-30 13:48
閱讀 658·2019-08-30 11:07
閱讀 2179·2019-08-29 16:23
閱讀 2005·2019-08-29 13:51
閱讀 2337·2019-08-26 17:42
