使用netty構建websocket服務器
阿新 • • 發佈：2018-11-24
open instance har frame javascrip eve cli ESS 循環
1、實時通信相關概念講解
2、編寫websocket啟動類
3、編寫websocket子處理器initalzer
4、編寫chatHandler對於消息的處理
package com.imooc.netty.websocket; import java.time.LocalDateTime; import io.netty.channel.Channel; import io.netty.channel.ChannelHandlerContext; import io.netty.channel.SimpleChannelInboundHandler; import io.netty.channel.group.ChannelGroup;import io.netty.channel.group.DefaultChannelGroup; import io.netty.handler.codec.http.HttpObject; import io.netty.handler.codec.http.websocketx.TextWebSocketFrame; import io.netty.util.concurrent.GlobalEventExecutor; /* * 處理消息的handler * TextWebSocketFrame：在netty中，是用於為websocket專門處理文本的對象，frame是消息的載體*/ public class ChatHandler extends SimpleChannelInboundHandler<TextWebSocketFrame>{ //用於記錄和管理所有客戶端的channle private static ChannelGroup clients = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE); @Override protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throwsException { //獲取客戶端傳輸過來的信息 String content = msg.text(); System.out.println("接收到的數據：" + content); for(Channel channel : clients) { channel.writeAndFlush(new TextWebSocketFrame("[服務器在]" + LocalDateTime.now() + "接收到消息，消息為：" + content)); } //與上面的for循環一致 // clients.writeAndFlush(new TextWebSocketFrame("[服務器在]" + LocalDateTime.now() // + "接收到消息，消息為：" + content)); } /** * 當客戶端連接服務端之後（打開連接） * 獲取客戶端的channle,並且放到ChannelGroup中去進行管理 */ @Override public void handlerAdded(ChannelHandlerContext ctx) throws Exception { clients.add(ctx.channel()); } @Override public void handlerRemoved(ChannelHandlerContext ctx) throws Exception { //當觸發handlerRemoved,ChannelGroup會自動移除客戶端的channel //clients.remove(ctx.channel()) System.out.println("客戶端斷開，channel對應的長id為：" + ctx.channel().id().asLongText()); System.out.println("客戶端斷開，channel對應的短id為：" + ctx.channel().id().asShortText()); } }
5、前端websocket編寫
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div>發送消息：</div> <input type="text" id="msgContent" /> <input type="button" value="點我發送" onclick="CHAT.chat()" /> <div>接受消息：</div> <div id="receiveMsg" style="background-color: gainsboro;"></div> <script type="application/javascript" > window.CHAT = { socket: null, init: function() { if (window.WebSocket) { CHAT.socket = new WebSocket("ws://7dxppj.natappfree.cc/ws"); CHAT.socket.onopen = function() { console.log("連接建立成功..."); }, CHAT.socket.onclose = function() { console.log("連接關閉..."); }, CHAT.socket.onerror = function() { console.log("發生錯誤..."); }, CHAT.socket.onmessage = function(e) { console.log("接收到消息" + e.data); var receiveMsg = document.getElementById("receiveMsg"); var html = receiveMsg.innerHTML; receiveMsg.innerHTML = html + "</br>" + e.data; } } else { alert("瀏覽器不支持websocket協議..."); } }, chat: function() { var msg = document.getElementById("msgContent"); CHAT.socket.send(msg.value); } }; CHAT.init(); </script> </body> </html>
使用netty構建websocket服務器