基于netty的实时通信

实时通信

• Ajax 轮训   // 会死循环，如果会有一些数据更新的话
• Long pull    // 阻塞模型，也是会循环  

        上面两种是被动响应，会比较耗资源

• websocket  // 是一种协议http1.0不支持长连接，http1.0支持长连接。

        非常主动，不会像上面那么消耗资源，只需建立一次http请求就能长时间连接。

1、编写好Server启动类 

代码如下：

package com.imooc.netty.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 WSSersver {

  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(null);

        ChannelFuture future = server.bind(8088).sync();

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

  }
}

2、编写初始化器

代码如下：

package com.imooc.netty.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.WebSocketServerProtocolHandler;
import io.netty.handler.stream.ChunkedWriteHandler;

public class WSServerInitialzer extends ChannelInitializer<SocketChannel> {


  protected void initChannel(SocketChannel socketChannel) throws Exception {
    ChannelPipeline pipeline = socketChannel.pipeline();

    // websocket 基于http协议，所以要有http编解码器
    pipeline.addLast(new HttpServerCodec());

    // 对写大数据流的支持
    pipeline.addLast(new ChunkedWriteHandler());

    // 对httpMessage进行聚合，聚合成FullHttpRequest或FullHttpResponse
    // 几乎在netty中的编程，都会使用到此hanler
    pipeline.addLast(new HttpObjectAggregator(1024 * 64));

    // ===================== 以上是用于支持http协议 ======================


    /**
     * websocket 服务器处理的协议，用于指定给客户端连接访问的路由: /ws
     * 本handler会帮你处理一些繁重的复杂的事
     * 会帮你处理握手动作：handshaking（close，ping，pong） ping + pong = 心跳
     * 对呀websocket来讲，都是以frames进行传输的，不同的数据类型对应的frames也不同
     */
    pipeline.addLast(new WebSocketServerProtocolHandler("/ws"));

    // 自定义的handler
    pipeline.addLast(null);


  }

}

3、将初始化器放到childHandler

.childHandler(new WSServerInitialzer());

代码如下：

package com.imooc.netty.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 WSSersver {

  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 WSServerInitialzer());

        ChannelFuture future = server.bind(8088).sync();

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

  }
}

4、创建一个ChatHandler的类，用于处理消息的handler

代码如下：

package com.imooc.netty.websocket;

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;

import java.time.LocalDateTime;

/**
 * 处理消息的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中去进行管理
   * @param ctx
   * @throws Exception
   */
  @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());
  }
}

5、将ChatHandler加入到自定义的handler

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

Websocket api

• var socket = new WebSocket("ws://[ip]:[port]");
•  生命周期：onopen() onmessage() onerror() onclose()
•  主动方法：Socket.send()    Socket.close()

前端编写 

<template>
  <div>
    <div>发送信息：</div>
    <input type="text" id="msgContent" />
    <input type="button" value="点我发送" @click="chat()" />

    <div>接收消息：</div>
    <div id="receiveMsg" style="background-color: gainsboro">

    </div>
  </div>
</template>

<script>
export default {
  name: "List",
  data: function () {
    return {
      loginUser: {},
      socket: null,
    };
  },
  created() {
    this.initWebSocket();
  },
  destroyed() {
    this.websock.close(); //离开路由之后断开websocket连接
  },
  methods: {
    initWebSocket() {
      //初始化weosocket
      const wsuri = "ws://127.0.0.1:8088/ws";
      this.websock = new WebSocket(wsuri);
      this.websock.onmessage = this.websocketonmessage;
      this.websock.onopen = this.websocketonopen;
      this.websock.onerror = this.websocketonerror;
      this.websock.onclose = this.websocketclose;
    },
    websocketonopen() {
      //连接建立之后执行send方法发送数据
        console.log("连接成功");
    },
    websocketonerror() {
      //连接建立失败重连
      this.initWebSocket();
      console.log("连接成功");
    },
    websocketonmessage(e) {
      //数据接收
      var receiveMsg = document.getElementById("receiveMsg");
      var html = receiveMsg.innerHTML;
      receiveMsg.innerHTML ="<p>" + html + e.data + "</p>" ;
    },
    websocketsend(Data) {
      //数据发送
      this.websock.send(Data);
    },
    websocketclose(e) {
      //关闭
      console.log("断开连接", e);
    },

    chat () {
      var msg = document.getElementById("msgContent");
      this.websocketsend(msg.value);
    }
  },
};
</script>



<style>
</style>