Netty搭建实时通信

一:常用实现方法

实时通信主要的实现方法

  • Ajax 轮训
  • long pull
  • WebSocket

二:服务端实现

1.WebSocketServer
package com.south.websocket;

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;

/**
 * 描述:  启动类
 **/

public class WebSocketServer {
    public static void main(String[] args) throws InterruptedException {
        //创建主从线程池
        EventLoopGroup mainGroup=new NioEventLoopGroup();
        EventLoopGroup subGroup=new NioEventLoopGroup();

        try{
            //创建服务器类
            ServerBootstrap server=new ServerBootstrap();
            server.group(mainGroup,subGroup)
                    .channel(NioServerSocketChannel.class)
                    .childHandler(new WSServerInitialzer());
            ChannelFuture future = server.bind(8888).sync();
            future.channel().closeFuture().sync();
        }finally {
            mainGroup.shutdownGracefully();
            subGroup.shutdownGracefully();
        }
    }
}

2.WSServerInitialzer
package com.south.websocket;

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.WebSocketClientProtocolHandler;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.handler.stream.ChunkedWriteHandler;

/**
 * 描述:  助手初始化类
 **/

public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {
    protected void initChannel(SocketChannel channel) throws Exception {
        //获取管道
        ChannelPipeline pipeline = channel.pipeline();
        //websocket 基于http协议,所需要的http 编解码器
        pipeline.addLast(new HttpServerCodec());
        //在http上有一些数据流产生提供支持
        pipeline.addLast(new ChunkedWriteHandler());
        //对httpMessage 进行聚合处理,聚合成request或response
        pipeline.addLast(new HttpObjectAggregator(1024*64));

        /**
         * 处理一些繁重复杂的事情
         * 处理握手动作:handshaking(close,ping,pong) ping+pong=心跳
         * 对于websocket来讲,都是以frams进行传输的,不同的数据类型对应的frams也不同
         */
        pipeline.addLast(new WebSocketServerProtocolHandler("/websocket"));

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

3.ChatHandler
package com.south.websocket;

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;


/**
 * 描述:  用于处理消息的handler
 * 用于它的传输数据的载体是frame,这个frame 在netty中,是用于为websocket专门处理文本对象的,frames是消息载体,(TextWebSocketFrame)
 **/
public class ChatHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> {
    //记录和管理所有客户端的channel
    private static ChannelGroup clients=new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);

    protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {
        //获取客户端所传输的消息
        String content = msg.text();
        System.out.println("接收到的数据:"+content);

        //将数据刷新到客户端上
        clients.writeAndFlush(
                new TextWebSocketFrame(
                        "[服务器在:]"+ LocalDateTime.now()
                        +"接收到消息,消息内容为:"+content
                )
        );
    }

    @Override
    public void handlerAdded(ChannelHandlerContext ctx) throws Exception {
        clients.add(ctx.channel());
    }

    @Override
    public void handlerRemoved(ChannelHandlerContext ctx) throws Exception {
        //clients.remove(ctx.channel());
        System.out.println("客户端断开,channel对应的长ID为:"+ctx.channel().id().asLongText());
        System.out.println("客户端断开,channel对应的短ID为:"+ctx.channel().id().asShortText());
    }
}

三:前端实现

1.WebSocket Api

初始化对象

var aWebSocket = new WebSocket(url [, protocols]);

生命周期

//只发出一次
aWebSocket.onopen = function(event) {
  console.log("WebSocket is open now.");
};
//只要二者建立连接,服务端向客户端推送消息,就会发出此函数
aWebSocket.onmessage = function(event) {
  console.debug("WebSocket message received:", event);
};
//监听器将在 WebSocket 连接的readyState 变为 CLOSED时被调用
WebSocket.onclose = function(event) {
  console.log("WebSocket is closed now.");
};
//可以定义一个发生错误时执行的回调函数
WebSocket.onerror = function(event) {
  console.error("WebSocket error observed:", event);
};

主动方法

//将需要通过 WebSocket 链接传输至服务器的数据排入队列
WebSocket.send("Hello server!");
//关闭 WebSocket  连接或连接尝试(如果有的话)。 如果连接已经关闭,则此方法不执行任何操作。
WebSocket.close();
2.具体实现
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Netty 实时通讯</title>
</head>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    var socket;
    function openSocket() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else{
            console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象,指定要连接的服务器地址与端口  建立连接
            //等同于socket = new WebSocket("ws://localhost:8888/websocket");
            var socketUrl="http://localhost:8888/websocket";
            socketUrl=socketUrl.replace("https","ws").replace("http","ws");
            console.log(socketUrl)
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                console.log("websocket已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
                console.log("接收消息"+msg.data);
                var receiveMsg=$("#receiveMsg");
                var html=receiveMsg.html();
                receiveMsg.html(html+"<br/>"+msg.data);

            };
            //关闭事件
            socket.onclose = function() {
                console.log("websocket已关闭");
            };
            //发生了错误事件
            socket.onerror = function() {
                console.log("websocket发生了错误");
            }
        }
    }
    function sendMessage() {
        if(typeof(WebSocket) == "undefined") {
            console.log("您的浏览器不支持WebSocket");
        }else {
            console.log("您的浏览器支持WebSocket");
            var msgContent=$("#msgContent").val();
            socket.send(msgContent);
        }
    }
    $(function(){
        openSocket();
    })
</script>
<body>
    发送消息:
    <input type="text" id="msgContent">
    <input type="button" value="发送消息" onclick="sendMessage()">
    <hr>
    接收消息:
    <div id="receiveMsg" ></div>
</body>

</html>


三:效果图展示

image.png

image.png

欢迎大家的支持和留言,代码已上传到我的开源项目,方便大家下载

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一生酷到底

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值