netty+websocket模拟视频弹幕功能

很多视频播放都具备弹幕功能,A发了一个文字,B,C播放该视频若是开启了弹幕就能看到A发的。一开始挺好奇这个是怎么实现的,用JAVA是不是可以实现呢?答案肯定是可以的,最笨的用ajax 轮询。但是这种会给服务器造成很大压力,也浪费了服务器资源。netty 中 ChannelGroup可广播消息 netty+ websocket 则性能大大改善,废话不哔哔,下面直接贴代码了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Netty WebSocket DEMO</title>
<script src="jquery.min.js"></script>
<style>
.tanmuContent {
    justify-content: space-between;
}
.headImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.headImg {
    display: inline-block;
    width: 30px;
    height: 30px;
    background: red;
    border-radius: 41px;
}
</style>
</head>
<body>
    <script type="text/javascript">
        var socket;
        if (!window.WebSocket) {
            window.WebSocket = window.MozWebSocket;
        }
        if (window.WebSocket) {
            socket = new WebSocket("ws://localhost:8080/ws");
            //连接创建成功时被回调
            socket.onopen = function(event) {
              // alert("websocket创建成功!");
            };
            //收到服务端的消息时被回调
            socket.onmessage = function(event) {
                showMsg(event.data);
            };
            socket.onclose = function(event) {
                var ta = document.getElementById('responseText');
                ta.value = ta.value + "连接被关闭";
            };
        } else {
            alert("你的浏览器不支持!");
        }

        function send(message) {
            if (!window.WebSocket) {
                return;
            }
            if (socket.readyState == WebSocket.OPEN) {
                socket.send(message);
            } else {
                alert("连接没有开启.");
            }
        }
        function showMsg(msg){
        var id="div_"+new Date().getTime();
        var html='<div id="'+id+'" class="tanmuContent" style="position: absolute;"><span class="headImg"><img src="tanmuhead.jpg"></span>'+msg+'<div class="praiseBox"><span class="t-praise "></span></div></div>';
         var height=$(document).height();
         var width=$(document.body).width();
         html =$(html);
       var t = Math.floor(Math.random()*(height-1+1)+1);
       html.css("left",width*0.8+"px")
         html.css("top",t+"px")

         $("body").append(html);
         $("#"+id).animate({"left":-width},20000,function(){
          $("#"+id).remove();
          console.log("sss")
         });      


        }

    </script>
    <form onsubmit="return false;">
        <input type="text" name="message" value="Hello, World!"><input
            type="button" value="发送消息"
            onclick="send(this.form.message.value)">
    </form>
</body>
</html>
package com.xuyw;

import io.netty.bootstrap.ServerBootstrap;
import io.netty.channel.Channel;
import io.netty.channel.ChannelInitializer;
import io.netty.channel.ChannelOption;
import io.netty.channel.EventLoopGroup;
import io.netty.channel.group.DefaultChannelGroup;
import io.netty.channel.nio.NioEventLoopGroup;
import io.netty.channel.socket.SocketChannel;
import io.netty.channel.socket.nio.NioServerSocketChannel;
import io.netty.handler.codec.http.HttpObjectAggregator;
import io.netty.handler.codec.http.HttpRequestDecoder;
import io.netty.handler.codec.http.HttpResponseEncoder;
import io.netty.handler.codec.http.websocketx.WebSocketServerProtocolHandler;
import io.netty.util.concurrent.GlobalEventExecutor;

public class WebSocketService2 {
    public void run(int port) throws Exception {  
        EventLoopGroup bossGroup = new NioEventLoopGroup();  
        EventLoopGroup workerGroup = new NioEventLoopGroup();  
        try {  
            final ServerBootstrap sb = new ServerBootstrap();  
            sb.group(bossGroup, workerGroup)  
             .channel(NioServerSocketChannel.class)  
             .childHandler(new ChannelInitializer<SocketChannel>() {  
                @Override  
                public void initChannel(final SocketChannel ch) throws Exception {  
                    ch.pipeline().addLast(  
                        new HttpResponseEncoder(),  
                        new HttpRequestDecoder(),  
                        new HttpObjectAggregator(65536),  
                        new WebSocketServerProtocolHandler("/ws"),  
                        new CustomTextFrameHandler());  
                }  
            }).option(ChannelOption.SO_BACKLOG, 65536)           
            .childOption(ChannelOption.SO_KEEPALIVE, true)  
            .childOption(ChannelOption.TCP_NODELAY, true);  
            //.childOption(ChannelOption.SO_BROADCAST, true);  
            //bootstrap.setOption("child.reuseAddress", true);        
            //bootstrap.setOption("child.tcpNoDelay", true);          
            //bootstrap.setOption("child.keepAlive", true);  

            final Channel ch = sb.bind(port).sync().channel();  
            System.out.println("Web socket server started at port " + port);  

            ch.closeFuture().sync();  
        } finally {  
            bossGroup.shutdownGracefully();  
            workerGroup.shutdownGracefully();  
        }  
    }  

    public static void main(String[] args) throws Exception {  
        int port;  
        if (args.length > 0) {  
            port = Integer.parseInt(args[0]);  
        } else {  
            port = 8080;  
        }  
        new WebSocketService2().run(port);  
    }  
}
package com.xuyw;

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;

public class CustomTextFrameHandler extends
        SimpleChannelInboundHandler<TextWebSocketFrame> {
    private static ChannelGroup recipients = new DefaultChannelGroup(
            "ChannelGroups", GlobalEventExecutor.INSTANCE);

    public CustomTextFrameHandler() {

    }

    @Override
    protected void messageReceived(ChannelHandlerContext ctx,
            TextWebSocketFrame frame) throws Exception {
        String request = frame.text();

        // ctx.channel().writeAndFlush(new
        // TextWebSocketFrame(request.toUpperCase()));
        System.out.println("size:" + recipients.size());
        recipients.writeAndFlush(new TextWebSocketFrame(request.toUpperCase()));

    }

    @Override
    public void channelActive(ChannelHandlerContext ctx) {
        recipients.add(ctx.channel());
        System.out.println("connect:" + recipients.size());
    }

    @Override
    public void handlerRemoved(ChannelHandlerContext ctx) {
        try {
            recipients.remove(ctx.channel());
            System.out.println("删除channel成功" + recipients.size());
        } catch (Exception ex) {
            System.out.println("删除channel失败" + ex.getMessage());
        }
    }

    @Override
    public void exceptionCaught(ChannelHandlerContext ctx, Throwable cause) {
        cause.printStackTrace();
        ctx.close();
    }
}

因为是随手写的demo,比较烂,凑合着看吧
这里写图片描述
本例基于netty 5.0.0.Alpha2

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
实现局域网音视频通话可以用Spring Boot作为后端框架,Netty作为网络通信框架,WebSocket作为实现双向通信的协议。以下是一个简单的实现过程: 1. 首先需要搭建一个Spring Boot项目,可以使用Spring Initializr来快速生成项目。在pom.xml中添加NettyWebSocket的依赖,例如: ```xml <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artifactId> <version>4.1.25.Final</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 创建一个WebSocket处理器类,用来处理WebSocket的连接、关闭和消息收发等逻辑。例如: ```java @Component @ServerEndpoint("/video-chat") public class VideoChatHandler { private static final Logger LOGGER = LoggerFactory.getLogger(VideoChatHandler.class); @OnOpen public void onOpen(Session session) { LOGGER.info("WebSocket opened: {}", session.getId()); } @OnMessage public void onMessage(String message, Session session) { LOGGER.info("Received message: {}", message); // TODO: 处理收到的消息 } @OnClose public void onClose(Session session) { LOGGER.info("WebSocket closed: {}", session.getId()); } @OnError public void onError(Throwable error) { LOGGER.error("WebSocket error", error); } } ``` 3. 在Spring Boot的配置类中添加WebSocket的配置,例如: ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Autowired private VideoChatHandler videoChatHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(videoChatHandler, "/video-chat").setAllowedOrigins("*"); } } ``` 4. 使用Netty来实现音视频的传输。可以使用Netty提供的UDP协议来实现多人音视频通话,也可以使用TCP协议来实现点对点的音视频通话。需要根据实际情况选择相应的协议,这里以TCP协议为例: ```java @Component public class VideoChatServer { private static final Logger LOGGER = LoggerFactory.getLogger(VideoChatServer.class); @Value("${server.video-chat.port}") private int port; @PostConstruct public void start() { EventLoopGroup bossGroup = new NioEventLoopGroup(); EventLoopGroup workerGroup = new NioEventLoopGroup(); try { ServerBootstrap bootstrap = new ServerBootstrap(); bootstrap.group(bossGroup, workerGroup) .channel(NioServerSocketChannel.class) .childHandler(new ChannelInitializer<SocketChannel>() { @Override public void initChannel(SocketChannel ch) throws Exception { ChannelPipeline pipeline = ch.pipeline(); // TODO: 添加音视频相关的编解码器和处理器 } }) .option(ChannelOption.SO_BACKLOG, 128) .childOption(ChannelOption.SO_KEEPALIVE, true); ChannelFuture future = bootstrap.bind(port).sync(); LOGGER.info("Video chat server started on port {}", port); future.channel().closeFuture().sync(); } catch (InterruptedException e) { LOGGER.error("Video chat server interrupted", e); } finally { workerGroup.shutdownGracefully(); bossGroup.shutdownGracefully(); } } } ``` 5. 在WebSocket处理器中实现音视频数据的收发逻辑。当收到音视频数据时,可以将数据转发给所有连接的WebSocket客户端。例如: ```java @Component @ServerEndpoint("/video-chat") public class VideoChatHandler { private static final Logger LOGGER = LoggerFactory.getLogger(VideoChatHandler.class); private List<Session> sessions = new CopyOnWriteArrayList<>(); @OnOpen public void onOpen(Session session) { LOGGER.info("WebSocket opened: {}", session.getId()); sessions.add(session); } @OnMessage public void onMessage(ByteBuffer buffer, Session session) throws IOException { LOGGER.info("Received video data from {}", session.getId()); byte[] data = new byte[buffer.remaining()]; buffer.get(data); for (Session s : sessions) { if (s.isOpen() && !s.getId().equals(session.getId())) { s.getBasicRemote().sendBinary(ByteBuffer.wrap(data)); } } } @OnClose public void onClose(Session session) { LOGGER.info("WebSocket closed: {}", session.getId()); sessions.remove(session); } @OnError public void onError(Throwable error) { LOGGER.error("WebSocket error", error); } } ``` 6. 在前端页面中使用WebSocket来实现音视频通话。可以使用WebRTC等技术来实现音视频采集、编解码、传输等功能。这里不再赘述。 以上就是一个简单的局域网音视频通话的实现过程。需要注意的是,音视频通话涉及到的技术较多,需要根据实际情况进行选择和配置。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值