搭建webassembly网页播放器(六)---websocket后台服务程序

这里我们主要介绍后台搭建技术,前端搭建好后,需要后端配置展现,实现的效果就是 :网页连接上我们的 websocket服务后,我们就从H264文件中不断的提取出H264帧,然后传递给前端,前端调用webassembly进行解码播放.

视频课程以及源码下载:
https://edu.csdn.net/course/detail/35615

章节列表:

实现效果:
在这里插入图片描述

依赖开源工程

目录结构如下:

在这里插入图片描述

对于我们后台程序,主要是 module以及server两个目录,web-clent是网页前端的html以及 webassembly c/c++代码.

module目录主要是我们后台服务程序依靠的第三方开源库;

  1. libwebsockets. 用于帮助我们搭建websocket server.
  2. SDL。
  3. ffmpeg. 使用ffmpeg主要是从h264文件中读取h264 nalu(有点飞机打蚊子的感觉!)

ffmpeg 编译

下载:
git clone https://git.ffmpeg.org/ffmpeg.git ffmpeg

编译:

./configure --prefix=$PWD/../server/ffmpeg --disable-everything --disable-yasm --enable-muxer=h264
make 
make install

SDL

官网: http://www.libsdl.org/
介绍:SDL是一个跨平台的库,实现了对windows/linux跨平台的支持,比如:线程,锁,信号量等

./configure --prefix=$PWD/../server/sdl/
make 
make install 

libwebsockets

官网: https://libwebsockets.org/
介绍: libwebsockets是一个基于C的websocekt开源库,基于它我们制作服务端.

git clone https://libwebsockets.org/repo/libwebsockets
mkdir build
cd build
cmake ..
make

编译后产生的静态库,我们都统一放在了server端目录下:
在这里插入图片描述

涉及技术点

连接池

连接池这个技术对于我们做后台并发服务的同学来说,是必须掌握的一个技术!

我们这里运用连接池,主要是为了解决临界问题:

比如这里我们服务停止有2个因素:

  1. 文件读完了。
  2. 用户关闭了网页,导致websocket服务终端

我们后台有一个会话Session,代表了和网页用户的"通讯",我们会使用std::map存储会话,key就是连接池句柄了!

1和2处于不同的线程,因此必然会导致临界问题,我们使用连接池,我们就可以确保我们的key永远是存活的.

nginx中的http模块对那种高并发情况下的 http请求/关闭,使用连接池还可以解决大量内存动态的分配/释放导致的CPU高负荷的问题.

具体运用,请参考我们的源码和视频讲解!

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
1. 添加依赖 在pom.xml中添加以下依赖: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 2. 配置WebSocket 在Spring Boot项目的配置文件application.properties中添加以下配置: ``` # WebSocket spring.web.socket.server.standard.max-text-message-size=5000000 spring.web.socket.server.standard.max-binary-message-size=5000000 ``` 3. 创建WebSocket处理器 创建一个WebSocket处理器,该处理器将处理所有WebSocket消息。在处理器中实现群聊功能。 ```java @Component public class WebSocketHandler extends TextWebSocketHandler { private static final List<WebSocketSession> sessions = new CopyOnWriteArrayList<>(); @Override public void afterConnectionEstablished(WebSocketSession session) throws Exception { sessions.add(session); } @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { for (WebSocketSession webSocketSession : sessions) { if (webSocketSession.isOpen()) { webSocketSession.sendMessage(new TextMessage(session.getId() + ": " + message.getPayload())); } } } @Override public void afterConnectionClosed(WebSocketSession session, CloseStatus status) throws Exception { sessions.remove(session); } } ``` 4. 配置WebSocket处理器 在Spring Boot项目的配置类中,使用@EnableWebSocket注解启用WebSocket,并将WebSocket处理器添加到WebSocketHandlerRegistry中。 ```java @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Autowired private WebSocketHandler webSocketHandler; @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(webSocketHandler, "/websocket").setAllowedOrigins("*"); } } ``` 5. 测试WebSocket服务 在前端页面中创建WebSocket连接,发送消息即可实现群聊。 ```javascript const ws = new WebSocket('ws://localhost:8080/websocket'); ws.onopen = () => { console.log('WebSocket连接已建立'); }; ws.onmessage = (event) => { console.log(event.data); }; ws.onerror = (error) => { console.log('WebSocket连接错误', error); }; ws.onclose = () => { console.log('WebSocket连接已关闭'); }; function sendMessage() { const message = document.getElementById('message').value; ws.send(message); } ``` 这样就可以实现一个简单的WebSocket群聊服务了。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

wh_shentu929

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

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

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

打赏作者

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

抵扣说明:

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

余额充值