spring boot + websocket 简单实现斗鱼弹幕功能

本文介绍如何使用Spring Boot结合WebSocket实现实现类似斗鱼的弹幕功能。通过添加相关依赖,设置WebSocket配置,编写后端控制器,以及前端引用jQuery库和barrager.js,创建简单的用户界面,最终实现双浏览器模拟弹幕效果。
摘要由CSDN通过智能技术生成

此项目使用spring boot + websocket 简单实现斗鱼的弹幕功能,功能比较粗糙。
先建立一个spring boot 项目:
spring boot 项目
pom.xml的依赖

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.2.6.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.daxiong</groupId>
	<artifactId>websocketdemo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>websocketdemo</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-websocket</artifactId>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

我这里主要写后端代码,前端弹幕的界面js从 https://yaseng.org/jquery.barrager.js/ 下载
js界面代码
下载js代码是个压缩包:
在这里插入图片描述
解压后主要页面是index.html, 将 index.html 和 index.html 引用的的js 和 css 文件添加进项目里
在这里插入图片描述
相关的页面和js加入项目
在这里插入图片描述
后端的代码可以参考spring 官网关于 websocket 的例子来写,先登录spring官网 https://spring.io/
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
websocket 有两种写法:一种自己定义服务端和客户端的通信的数据格式,一种是使用现在比较流行的STOMP;这里使用通用的流行方案STOMP,在官网上也有相应的例子:在这里插入图片描述
上面spring官网的学习例子,有兴趣的同学可以认真研究一下。我这里是利用官网的例子写的,先从官网下载后端的代码:
在这里插入图片描述
Ctrl + f 搜索 websocket :
在这里插入图片描述
点击下载官方代码的例子,下载完成后得到一个压缩包,解压即可:
在这里插入图片描述
在这里插入图片描述
解压后的gs-messaging-stomp-websocket-master --》 complete , complete 文件就是官网demo代码,从complete的pom.xml文件将需要js的依赖引入我们自己的项目

		<dependency>
			<groupId>org.webjars</groupId>
			<artifactId>sockjs-client</artifactId>
			<version>1.0.2</version>
		<
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring-Boot WebSocket 可以实现向日葵远程控制。向日葵是一款远程控制软件,可以让我们在远程控制设备时更加方便和灵活。在使用Spring-Boot实现WebSocket时,我们可以结合向日葵的API来达到远程控制的目的。 首先,在Spring-Boot中,我们需要引入WebSocket的依赖。可以在pom.xml文件中添加相应的依赖,例如: ``` <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> ``` 然后,我们需要创建WebSocket的配置类。在配置类中,我们可以定义WebSocket的相关设置,例如消息处理器、握手拦截器等。可以参考以下代码: ``` @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myHandler(), "/myHandler").withSockJS(); } @Bean public WebSocketHandler myHandler() { return new MyHandler(); } } ``` 在以上代码中,`registerWebSocketHandlers` 方法用来注册WebSocket处理器,并指定了处理路径。`MyHandler` 是自定义的消息处理器,可以在其中处理接收到的消息、发送消息等。 接下来,我们可以在处理器中调用向日葵的API,实现远程控制的功能。例如: ``` public class MyHandler extends TextWebSocketHandler { @Override protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception { // 处理接收到的消息 String receivedMessage = message.getPayload(); // 调用向日葵API,实现远程控制 // 发送消息 String responseMessage = "远程控制成功"; session.sendMessage(new TextMessage(responseMessage)); } } ``` 在以上代码中,`handleTextMessage` 方法用来处理接收到的消息。我们可以在其中调用向日葵的API实现远程控制的逻辑,并将结果作为消息发送回客户端。 最后,在Spring-Boot的主类中添加 `@EnableWebSocket` 注解,启用WebSocket功能。 综上所述,通过Spring-Boot WebSocket,我们可以便捷地实现向日葵远程控制的功能。使用WebSocket协议进行通信,同时结合向日葵的API,可以让我们更加灵活地远程控制设备。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值