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