使用netty編寫IM通訊界面

時間 2019-11-19

標籤使用 netty 編寫通訊界面欄目 Netty 简体版

原文原文鏈接

前驅知識

WebSocket

維基百科：
WebSocket是一種在單個TCP鏈接上進行全雙工通訊的協議。WebSocket通訊協議於2011年被IETF定爲標準RFC 6455，並由RFC7936補充規範。WebSocket API也被W3C定爲標準。javascript

WebSocket使得客戶端和服務器之間的數據交換變得更加簡單，容許服務端主動向客戶端推送數據。在WebSocket API中，瀏覽器和服務器只須要完成一次握手，二者之間就直接能夠建立持久性的鏈接，並進行雙向數據傳輸。html

添加maven依賴

<build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <source>8</source>
                    <target>8</target>
                </configuration>
            </plugin>
        </plugins>
    </build>


    <dependencies>
        <dependency>
            <groupId>io.netty</groupId>
            <artifactId>netty-all</artifactId>
            <version>4.1.25.Final</version>
        </dependency>
    </dependencies>

編寫代碼

Chat處理器

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.websocketx.TextWebSocketFrame;
import io.netty.util.concurrent.GlobalEventExecutor;

import java.time.LocalDateTime;

/**
 * @author: Tu9ohost
 * 處理消息的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)
            throws Exception {
        // 獲取客戶端傳輸過來的消息
        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("客戶端斷開，channle對應的長id爲："
                + ctx.channel().id().asLongText());
        System.out.println("客戶端斷開，channle對應的短id爲："
                + ctx.channel().id().asShortText());
    }
}

編寫服務初始化

import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelPipeline;
import io.netty.channel.socket.SocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpServerCodec;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.handler.stream.ChunkedWriteHandler;

/**
 * @author: Tu9ohost
 */
public class WSServerInitiazer extends ChannelInitializer<SocketChannel> {

    @Override
    protected void initChannel(SocketChannel ch) throws Exception {
        ChannelPipeline pipeline = ch.pipeline();

        // websocket 基於http協議，因此要有http編解碼器
        pipeline.addLast(new HttpServerCodec());
        // 對寫大數據流的支持
        pipeline.addLast(new ChunkedWriteHandler());
        // 對httpMessage進行聚合，聚合成FullHttpRequest或FullHttpResponse
        // 幾乎在netty中的編程，都會使用到此hanler
        pipeline.addLast(new HttpObjectAggregator(1024*64));

        // ====================== 以上是用於支持http協議    ======================

        // ====================== 如下是支持httpWebsocket ======================

        /**
         * websocket 服務器處理的協議，用於指定給客戶端鏈接訪問的路由 : /ws
         * 本handler會幫你處理一些繁重的複雜的事
         * 會幫你處理握手動做： handshaking（close, ping, pong） ping + pong = 心跳
         * 對於websocket來說，都是以frames進行傳輸的，不一樣的數據類型對應的frames也不一樣
         */
        pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));

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

主方法

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.ChannelFuture;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.nio.NioServerSocketChannel;

/**
 * @author: Tu9ohost
 */
public class WSServer {

    public static void main(String[] args) throws Exception {

        EventLoopGroup mainGroup = new NioEventLoopGroup();
        EventLoopGroup subGroup = new NioEventLoopGroup();

        try {
            ServerBootstrap server = new ServerBootstrap();
            server.group(mainGroup, subGroup)
                    .channel(NioServerSocketChannel.class)
                    .childHandler(new WSServerInitiazer());

            // 定義了端口爲8088
            ChannelFuture future = server.bind(8088).sync();

            future.channel().closeFuture().sync();
        } finally {
            mainGroup.shutdownGracefully();
            subGroup.shutdownGracefully();
        }
    }
}

編寫界面

<!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://127.0.0.1:8088/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>