Netty结合WebSocket的聊天室

红太狼 2023-07-05 11:45 22阅读 0赞

# Netty结合WebSocket的聊天室 #

### 首先是Netty的服务器端 ###

*  由于结合了springboot，所以添加了@Component注解，也可以直接写一个main函数启动

import io.netty.bootstrap.ServerBootstrap;
    import io.netty.channel.ChannelFuture;
    import io.netty.channel.ChannelOption;
    import io.netty.channel.EventLoopGroup;
    import io.netty.channel.nio.NioEventLoopGroup;
    import io.netty.channel.socket.nio.NioServerSocketChannel;
    import org.springframework.stereotype.Component;
    
    /** * author:Jerry1ee * time:2020.2.1 * */
    @Component
    public class WebChatServer { 
    
        private static class SingletonWebChatServer{ 
            static final WebChatServer instance = new WebChatServer();
        }
    
        public static WebChatServer getInstance()
        { 
            return new SingletonWebChatServer().instance;
        }
        private EventLoopGroup bossGroup ;
        private EventLoopGroup workGroup ;
        private ServerBootstrap server;
        private ChannelFuture channelFuture;
    
        public WebChatServer(){ 
            bossGroup = new NioEventLoopGroup();
            workGroup = new NioEventLoopGroup();
            server = new ServerBootstrap();
            server.group(bossGroup,workGroup)
                    .channel(NioServerSocketChannel.class)
                    .childHandler(new WebChatServerInitializer())
                    .option(ChannelOption.SO_BACKLOG,128)
                    .childOption(ChannelOption.SO_KEEPALIVE,true);
        }
        public void start()
        { 
            this.channelFuture = server.bind(8088);
            System.out.println("服务器已经启动...");
        }
    
    }

### Netty的服务器初始化器 ###

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:Jerry1ee * time:2020.2.1 * */
    public class WebChatServerInitializer extends ChannelInitializer<SocketChannel> { 
    
        @Override
        protected void initChannel(SocketChannel socketChannel) throws Exception { 
    
            ChannelPipeline pipeline = socketChannel.pipeline();
    
            pipeline.addLast(new HttpServerCodec());
            pipeline.addLast(new HttpObjectAggregator(64*1024));
            pipeline.addLast(new ChunkedWriteHandler());
            pipeline.addLast(new HttpRequestHandler("/ws"));
            pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));
            pipeline.addLast(new TextWebSocketFrameHandler());
    
    
        }
    }

### Netty的助手类 ###

*  助手类有自定义的，也有Netty中原本就有的
 *  助手类就是为了添加业务过滤逻辑的，可以处理过来的socket请求
 *  这边一共写了两个助手类

#### HttpRequestHandler助手类 ####

*  为了拦截http请求进而转化成为websocket请求的
 *  这一部分参考了别人的代码，不再贴出

#### 发送文本的助手类 ####

package com.lzy.chatmovie.netty;
    
    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.websocketx.TextWebSocketFrame;
    import io.netty.util.concurrent.GlobalEventExecutor;
    
    /** * author:Jerry1ee * time:2020.2.1 * */
    public class TextWebSocketFrameHandler extends SimpleChannelInboundHandler<TextWebSocketFrame> { 
    
        public static ChannelGroup channels = new DefaultChannelGroup(GlobalEventExecutor.INSTANCE);
    
        //有客户端连接时，自动调用，将链接的客户端记录下来
        @Override
        public void handlerAdded(ChannelHandlerContext ctx) throws Exception { 
            Channel income = ctx.channel();
    
            //进入聊天室
            for (Channel channel : channels) { 
                    channel.writeAndFlush(new TextWebSocketFrame("欢迎 " + income.remoteAddress() + "进入聊天室！"));
            }
            channels.add(ctx.channel());
            System.out.println(income.remoteAddress()+"加入了！");
        }
    
        @Override
        public void handlerRemoved(ChannelHandlerContext ctx) throws Exception { 
            Channel outcome = ctx.channel();
    
            //进入聊天室
            for (Channel channel : channels) { 
                    channel.writeAndFlush(new TextWebSocketFrame(outcome.remoteAddress() + " 离开了！"));
            }
            channels.remove(ctx.channel());
            System.out.println(outcome.remoteAddress()+"离开了！");
        }
    
        //客户端发送消息时，自动执行
        @Override
        protected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception { 
            Channel income = ctx.channel();//获得发送消息的人的链接通道
    
            System.out.println(msg.text());
            System.out.println("此时所有的连接：");
            for (Channel channel : channels) { 
    
                System.out.println(channel);
                if (channel != income) { 
                    channel.writeAndFlush(new TextWebSocketFrame("[用户]" + income.remoteAddress() + "说：" + msg.text()));
                } else { 
                    channel.writeAndFlush(new TextWebSocketFrame("我说：" + msg.text()));
                }
            }
    
        }
    }

### 前端（采用了Vue框架） ###

<template>
      <div class="chat_container">
        
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>聊天室测试</el-breadcrumb-item>
        </el-breadcrumb>
        
        <el-card class="box-card">
          
          <el-form  ref="chatFormRef" :model="chatForm">
            
            <el-form-item prop="chatArea">
              <el-input  type="textarea" v-model="chatForm.chatArea" :rows="18"></el-input>
            </el-form-item>
    
            <el-row :gutter="20">
              <el-col :span="7">
                
                <el-form-item prop="message">
                  <el-input v-model="chatForm.message" clearable @keyup.enter.native=send> </el-input>
                </el-form-item>
    
              </el-col>
              <el-col :span="4">
                
                <el-form-item class="buttons">
                  <el-button type="primary" @click="send">发送消息</el-button>
                </el-form-item>
              </el-col>
            </el-row>
    
          </el-form>
        </el-card>
    
      </div>
    
    </template>
    
    <script>
      export default {
        data()
        {
          return{
            chatForm:{
              chatArea:'',
              message:''
            },
            path:"ws://localhost:8088/ws",
            socket:""
    
          }
        },
        mounted()
        {
          this.init()
        },
        methods:
          {
            init: function () {
              if(typeof(WebSocket) === "undefined"){
                this.$message.warning("您的浏览器不支持socket")
              }else{
                // 实例化socket
                this.socket = new WebSocket(this.path)
                // 监听socket连接
                this.socket.onopen = this.open
                // 监听socket消息
                this.socket.onmessage = this.onmessage
                //监听socket关闭
                this.socket.onclose = this.onclose
            }
          },
            open:function(event) {
              this.chatForm.chatArea = "连接开启！"
            },
            onmessage:function(msg)
            {
              this.chatForm.chatArea = this.chatForm.chatArea+"\n"+msg.data
            },
            onclose:function(){
              this.chatForm.chatArea = this.chatForm.chatArea+"\n连接关闭"
            },
            send:function () {
              if (!window.WebSocket) {
                return;
              }
              if(this.socket.readyState ==WebSocket.OPEN )
              {
                this.socket.send(this.chatForm.message)
                this.chatForm.message=""
              }
              else {
                alert("连接没有开启！")
              }
            }
      }
      }
    
    </script>
    
    <style lang="less" scoped>
      .login_container{
        background-color: #25606b;
        height: 100%;
      }
    
      /*.chat_form{*/
        /*position: absolute;*/
        /*bottom: 0;*/
        /*width: 100%;*/
        /*right: 0;*/
        /*padding: 0 100px;*/
        /*box-sizing: border-box;*/
    
      /*}*/
    
      /*.textarea_form{*/
        /*position: absolute;*/
        /*bottom:10px;*/
        /*width: 50%;*/
        /*right: 0;*/
        /*padding: 0 100px;*/
        /*box-sizing: border-box;*/
    
      /*}*/
    </style>