Java基于websocket协议与netty实时视频弹幕交互实现

目录

  • 摘要
  • 1 技术选型
    • 1.1 netty
    • 1.2 WebSocket
    • 1.3 为什么做这样的技术选型。
  • 2 实现思路
    • 2.1 服务架构
  • 3 实现效果
    • 3.1 视频展示
  • 4 代码实现
    • 4.1 项目结构
    • 4.2 Java服务端
    • 4.3 网页客户端实现
  • 5 小结

    摘要 2021年了,还有不支持弹幕的视频网站吗,现在各种弹幕玩法层出不穷,抽奖,ppt都上弹幕玩法了,不整个弹幕都说不过去了,今天笔者就抽空做了一个实时视频弹幕交互功能的实现,不得不说这样的形式为看视频看直播,讲义PPT,抽奖等形式增加了许多乐趣。

    1 技术选型
    1.1 netty
    官方对于netty的描述:netty官网.
    Netty is an asynchronous event-driven network application framework
    for rapid development of maintainable high performance protocol servers & clients.
    Netty is a NIO client server framework which enables quick and easy development of network applications such as protocol servers and clients. It greatly simplifies and streamlines network programming such as TCP and UDP socket server.
    ‘Quick and easy' doesn't mean that a resulting application will suffer from a maintainability or a performance issue. Netty has been designed carefully with the experiences earned from the implementation of a lot of protocols such as FTP, SMTP, HTTP, and various binary and text-based legacy protocols. As a result, Netty has succeeded to find a way to achieve ease of development, performance, stability, and flexibility without a compromise.1
    主要关键词描述:netty是异步事件驱动网络框架,可做各种协议服务端,并且支持了FTP,SMTP,HTTP等很多协议,并且性能,稳定性,灵活性都很棒。
    Java基于websocket协议与netty实时视频弹幕交互实现
    文章图片


    可以看到netty整体架构上分了三个部分:
    a. 以零拷贝,一致性接口,扩展事件模型的底层核心。
    b. Socket,Datagram,Pipe,Http Tunnel作为传输媒介。
    c. 传输支持的各种协议,HTTP&WebSocket,SSL,大文件,zlib/gzip压缩,文本,二进制,Google Protobuf等各种各种的传输形式。

    1.2 WebSocket
    WebSocket是一种在单个TCP连接上进行全双工通信的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455,并由RFC7936补充规范。WebSocket API也被W3C定为标准。
    WebSocket使得客户端和服务器之间的数据交换变得更加简单,允许服务端主动向客户端推送数据。在WebSocket API中,浏览器和服务器只需要完成一次握手,两者之间就直接可以创建持久性的连接,并进行双向数据传输。2

    1.3 为什么做这样的技术选型。
    a. 由上述可知,实时直播交互作为互动式是一个双向数据传输过程。所以使用webSocket。
    b. netty本身支持了webSocket协议的实现,让实现更加简单方便。

    2 实现思路
    2.1 服务架构
    整体架构是所有客户端都和我的服务端开启一个双向通道的架构。

    Java基于websocket协议与netty实时视频弹幕交互实现
    文章图片

    2.2 传输流程
    Java基于websocket协议与netty实时视频弹幕交互实现
    文章图片


    3 实现效果
    3.1 视频展示
    先看看效果吧,是不是perfect,接下来就来看具体代码是怎么实现的吧。


    视频直播弹幕示例

    4 代码实现
    4.1 项目结构
    一个maven项目,将代码放一个包下就行。

    Java基于websocket协议与netty实时视频弹幕交互实现
    文章图片


    4.2 Java服务端
    Java服务端代码,总共三个类,Server,Initailizer和 Handler。
    4.2.1 先做一个netty nio的服务端:
    一个nio的服务,开启一个tcp端口。
    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; /** * Copyright(c)lbhbinhao@163.com * @author liubinhao * @date 2021/1/14 * ++++ __________________ * +++//|//|//| * +/_____/|/_____/|/_____/| * ||||||||| * ||||||________||| * |||||/||| * |||||/___________||| * |||___________________||____________||| * ||// ||||||| * ||/ _________________//||/||/ * |_________________________|/b|_____|/|_____|/ */public enum BulletChatServer {/*** Server instance*/SERVER; private BulletChatServer(){EventLoopGroup mainGroup = new NioEventLoopGroup(); EventLoopGroup subGroup= new NioEventLoopGroup(); ServerBootstrap server = new ServerBootstrap(); server.group(mainGroup,subGroup).channel(NioServerSocketChannel.class).childHandler(new BulletChatInitializer()); ChannelFuture future = server.bind(9123); }public static void main(String[] args) {}}

    4.2.2 服务端的具体处理逻辑
    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; import io.netty.handler.timeout.IdleStateHandler; /** * Copyright(c)lbhbinhao@163.com * * @author liubinhao * @date 2021/1/14 * ++++ __________________ * +++//|//|//| * +/_____/|/_____/|/_____/| * ||||||||| * ||||||________||| * |||||/||| * |||||/___________||| * |||___________________||____________||| * ||// ||||||| * ||/ _________________//||/||/ * |_________________________|/b|_____|/|_____|/ */public class BulletChatInitializer extends ChannelInitializer {@Overrideprotected void initChannel(SocketChannel ch) throws Exception {ChannelPipeline pipeline = ch.pipeline(); pipeline.addLast(new HttpServerCodec()); pipeline.addLast(new ChunkedWriteHandler()); pipeline.addLast(new HttpObjectAggregator(1024*64)); pipeline.addLast(new IdleStateHandler(8, 10, 12)); pipeline.addLast(new WebSocketServerProtocolHandler("/lbh")); pipeline.addLast(new BulletChatHandler()); }}[^

    后台处理逻辑,接受到消息,写出到所有的客户端:
    import io.netty.channel.Channel; import io.netty.channel.ChannelHandler; 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.EventExecutorGroup; import io.netty.util.concurrent.GlobalEventExecutor; /** * Copyright(c)lbhbinhao@163.com * * @author liubinhao * @date 2021/1/14 * ++++ __________________ * +++//|//|//| * +/_____/|/_____/|/_____/| * ||||||||| * ||||||________||| * |||||/||| * |||||/___________||| * |||___________________||____________||| * ||// ||||||| * ||/ _________________//||/||/ * |_________________________|/b|_____|/|_____|/ */public class BulletChatHandlerextends SimpleChannelInboundHandler {// 用于记录和管理所有客户端的channelpublic static ChannelGroup channels =new DefaultChannelGroup(GlobalEventExecutor.INSTANCE); @Overrideprotected void channelRead0(ChannelHandlerContext ctx, TextWebSocketFrame msg) throws Exception {// 获取客户端传输过来的消息String content = msg.text(); System.err.println("收到消息:"+ content); channels.writeAndFlush(new TextWebSocketFrame(content)); System.err.println("写出消息完成:"+content); }@Overridepublic void handlerAdded(ChannelHandlerContext ctx) throws Exception {channels.add(ctx.channel()); }@Overridepublic void handlerRemoved(ChannelHandlerContext ctx) throws Exception {String channelId = ctx.channel().id().asShortText(); System.out.println("客户端被移除,channelId为:" + channelId); channels.remove(ctx.channel()); }@Overridepublic void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) throws Exception {cause.printStackTrace(); // 发生异常之后关闭连接(关闭channel),随后从ChannelGroup中移除ctx.channel().close(); channels.remove(ctx.channel()); }}


    4.3 网页客户端实现
    Netty视频弹幕实现 Author:Binhao Liu - 锐客网* {margin: 0px; padding: 0px}html, body {height: 100%}body {overflow: hidden; background-color: #FFF; text-align: center; }.flex-column {display: flex; flex-direction: column; justify-content: space-between; , align-items: center; }.flex-row {display: flex; flex-direction: row; justify-content: center; align-items: center; }.wrap {overflow: hidden; width: 70%; height: 600px; margin: 100px auto; padding: 20px; background-color: transparent; box-shadow: 0 0 9px #222; border-radius: 20px; }.wrap .box {position: relative; width: 100%; height: 90%; background-color: #000000; border-radius: 10px}.wrap .box span {position: absolute; top: 10px; left: 20px; display: block; padding: 10px; color: #336688}.wrap .send {display: flex; width: 100%; height: 10%; background-color: #000000; border-radius: 8px}.wrap .send input {width: 40%; height: 60%; border: 0; outline: 0; border-radius: 5px 0px 0px 5px; box-shadow: 0px 0px 5px #d9d9d9; text-indent: 1em}.wrap .send .send-btn {width: 100px; height: 60%; background-color: #fe943b; color: #FFF; text-align: center; border-radius: 0px 5px 5px 0px; line-height: 30px; cursor: pointer; }.wrap .send .send-btn:hover {background-color: #4cacdc}发送

    这样一个实时的视频弹幕功能就完成啦,是不是很简单,各位小伙伴快来试试吧。

    5 小结 上班撸代码,下班继续撸代码写博客,这个还是很简单,笔者写这个的时候一会儿就写完了,不过这也得益于笔者很久以前就写过netty的服务,对于Http,Tcp之类协议也比较熟悉,只有前端会有些难度,问下度娘,也很快能做完,在此分享出来与诸君分享。
    【Java基于websocket协议与netty实时视频弹幕交互实现】到此这篇关于Java基于websocket协议与netty实时视频弹幕交互实现的文章就介绍到这了,更多相关Java websocket与netty弹幕交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

      推荐阅读