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

此项目使用spring boot + websocket 简单实现斗鱼的弹幕功能，功能比较粗糙。
先建立一个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代码是个压缩包：

解压后主要页面是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></dependency><dependency><groupId>org.webjars</groupId><artifactId>stomp-websocket</artifactId><version>2.3.3</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>bootstrap</artifactId><version>3.3.7</version></dependency><dependency><groupId>org.webjars</groupId><artifactId>jquery</artifactId><version>3.1.1-1</version></dependency>

主要的后端代码参照gs-messaging-stomp-websocket-master --》complete --》 src --》 main --》 java --》 com --》 example --》 messagingstompwebsocket

将resources 里app.js 也添加进项目里，待会要用：

项目里index.html的源码：

<!doctype html>
<html lang="zh">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jquery.barrager.js-专业的网页弹幕插件</title><link rel="stylesheet" type="text/css" href="/css/title/bootstrap.min.css" media="screen" /><link rel="stylesheet" type="text/css" href="/css/title/htmleaf-demo.css"><link rel="stylesheet" type="text/css" href="/css/title/style.css" /><link rel="stylesheet" type="text/css" href="/css/title/barrager.css"><link rel="stylesheet" type="text/css" href="/css/title/pick-a-color-1.2.3.min.css"><link type="text/css" rel="stylesheet" href="/css/title/shCoreDefault.css"/><!--[if IE]><script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script><![endif]--><script type="text/javascript" src="/js/title/jquery-1.9.1.min.js"></script><script type="text/javascript" src="/js/title/bootstrap.min.js"></script><script type="text/javascript" src="/js/title/tinycolor-0.9.15.min.js"></script>  <script type="text/javascript" src="/js/title/jquery.barrager.min.js"></script><script type="text/javascript" src="/js/title/shCore.js"></script><script type="text/javascript" src="/js/title/shBrushJScript.js"></script><script type="text/javascript" src="/js/title/shBrushPhp.js"></script><script type="text/javascript" src="/js/title/pick-a-color-1.2.3.min.js"></script><link href="/webjars/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"><script src="/webjars/sockjs-client/1.0.2/sockjs.min.js"></script><script src="/webjars/stomp-websocket/2.3.3/stomp.min.js"></script><script src="/js/title/app.js"></script><script type="text/javascript">function  run_example(msg){var example_item={'img':'/img/heisenberg.png','info':msg};$('body').barrager(example_item);return false;}$(function(){connect();});</script>
</head>
<body class="bb-js">
<h1>为所欲为主播</h1>
<img  src="/img/weisuoyuwei.gif">
<input type="text" id="name" class="form-control" placeholder="写下你的弹幕...">
<button id="send" class="btn btn-default" type="submit">Send</button>
</body>
</html>

app.js 也做一定的修改：

var stompClient = null;function setConnected(connected) {$("#connect").prop("disabled", connected);$("#disconnect").prop("disabled", !connected);if (connected) {$("#conversation").show();}else {$("#conversation").hide();}$("#greetings").html("");
}function connect() {var socket = new SockJS('/daxiong');stompClient = Stomp.over(socket);stompClient.connect({}, function (frame) {setConnected(true);console.log('Connected: ' + frame);// 客户端的订阅stompClient.subscribe('/topic/daxiong', function (data) {run_example(data.body);
//            showGreeting(JSON.parse(greeting.body).content);});});
}function disconnect() {if (stompClient !== null) {stompClient.disconnect();}setConnected(false);console.log("Disconnected");
}function sendName() {var titleContent = $("#name").val();stompClient.send("/app/hello", {name:"jingXiang"}, titleContent);
}function showGreeting(message) {$("#greetings").append("<tr><td>" + message + "</td></tr>");
}$(function () {$("form").on('submit', function (e) {e.preventDefault();});$( "#connect" ).click(function() { connect(); });$( "#disconnect" ).click(function() { disconnect(); });$( "#send" ).click(function() { sendName(); });
});

后端代码主要是 WebSocketConfig.java 和 GreetingController.java 这两个：
WebSocketConfig.java

package com.daxiong.websocketdemo.config;import org.springframework.context.annotation.Configuration;
import org.springframework.messaging.simp.config.MessageBrokerRegistry;
import org.springframework.web.socket.config.annotation.EnableWebSocketMessageBroker;
import org.springframework.web.socket.config.annotation.StompEndpointRegistry;
import org.springframework.web.socket.config.annotation.WebSocketMessageBrokerConfigurer;@Configuration
@EnableWebSocketMessageBroker
public class WebSocketConfig implements WebSocketMessageBrokerConfigurer {@Overridepublic void configureMessageBroker(MessageBrokerRegistry config) {config.enableSimpleBroker("/topic");// 客户端以app开头的消息会被处理// 比如 app/xxx 会被加了 @MessageMapping("/xxx") 方法处理// @SendTo("/topic/greetings"),必须在  @MessageMapping的方法上面config.setApplicationDestinationPrefixes("/app");}@Overridepublic void registerStompEndpoints(StompEndpointRegistry registry) {// 客户端连接的协议registry.addEndpoint("/daxiong").withSockJS();}}

GreetingController.java

package com.daxiong.websocketdemo.controller;import org.springframework.messaging.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.stereotype.Controller;@Controller
public class GreetingController {@MessageMapping("/hello")@SendTo("/topic/daxiong")public String index(Message message) throws Exception {byte[] body = (byte[])message.getPayload();String content = new String(body);return content ;}}

打开两个浏览器，一个火狐，一个谷歌，输入 http://localhost:8080/index.html ，运行后的效果图：

这样就简单地完成了类似斗鱼的弹幕功能。

以下是对项目一些要注意的地方进行说明：

index.html 其中一些js和css文件并不在resources里，是通过jar引入的

2.客户端和服务端订阅消息的对应

3.上面是群发，也有相关点对点发消息，可以参考以下代码：

package com.daxiong.web;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.messaging.Message;
import org.springframework.messaging.handler.annotation.MessageMapping;
import org.springframework.messaging.handler.annotation.SendTo;
import org.springframework.messaging.simp.SimpMessagingTemplate;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;@Controller
public class MessageController {@Autowiredprivate SimpMessagingTemplate template; // 服务器 主动往 浏览器推送数据需要使用的template @MessageMapping("/chat")
//  @SendTo("/topic/message") // 群发所有人
//  @SendToUser("")  // 点对点聊天public String broadCast(Message message) {byte[] bytes = (byte[]) message.getPayload();String content = new String(bytes);String uname = content.split("--")[0];System.out.println(content);serverSendMsg(uname);return "success";}@GetMapping("serverSend")public void serverSendMsg(String name) {// 服务器主动往 所有订阅消息的浏览器 推送数据
//      template.convertAndSend("/topic/message", "任务跑完了");// 服务器主动往 单个用户的浏览器 推送数据template.convertAndSendToUser(name,"/ptp", "任务跑完了");}
}

spring boot + websocket 简单实现斗鱼弹幕功能相关推荐

springboot 使用 Spring Boot WebSocket 创建聊天室 2-11
什么是 WebSocket WebSocket 协议是基于 TCP 的一种网络协议,它实现了浏览器与服务器全双工(Full-duplex)通信-允许服务器主动发送信息给客户端. 以前,很多网站为了实现 ...
Spring Boot最新版集成邮件发送功能大全
Spring Boot最新版集成邮件发送功能大全前言一.开启SMTP服务并获取授权码二.创建Spring Boot项目 1.配置邮箱基本信息: 2.简单邮件发送: 3.发送带附件的邮件: 5.使 ...
flutter 弹幕插件_Flutter 实现虎牙/斗鱼弹幕功能
用Flutter实现弹幕功能,轻松实现虎牙.斗鱼的弹幕效果. 先来一张效果图: 实现原理弹幕的实现原理非常简单,即将一条弹幕从左侧平移到右侧,当然我们要计算弹幕垂直方向上的偏移,不然所有的弹幕都会在 ...
springboot导入项目依赖报错_使用Spring Boot很简单，go！！！
Spring Boot依赖使用Spring Boot很简单,先添加基础依赖包,有以下两种方式 1. 继承spring-boot-starter-parent项目 org.springframe ...
关于Spring Boot WebSocket整合以及nginx配置详解
这篇文章主要给大家介绍了关于Spring Boot WebSocket整合以及nginx配置的相关资料,文中通过示例代码给大家介绍的非常详细,相信对大家的学习或者工作具有一定的参考学习价值,需要的朋友 ...
JavaScript css3模拟简单的视频弹幕功能
最近相对比较空闲,想写一些东西写着玩.就尝试写了一个demo模拟了最简单的视频弹幕功能~~. 思路: 设置一个<div>和所播放的video的大小一致,把这个div标签蒙在video上面用 ...
Spring Boot Mybatis简单使用
Spring Boot Mybatis简单使用步骤说明 build.gradle:依赖添加 application.properties:配置添加代码编写测试 build.gradle:依赖添加 ...
Spring Boot集成支付宝电脑网站支付功能
Spring Boot集成支付宝电脑网站支付功能接入准备登录创建应用添加能力生成私钥与公钥开发设置沙箱环境示例Demo的使用与学习下载Demo 启动项目参数配置执行测试 Spri ...
项目_功能模块_基于Spring Boot的文件上传下载功能的设计与实现
文章目录基于Spring Boot的文件上传下载功能模块的设计与实现 1.前言 2.技术栈 3.关键源码 4.实现效果 4.1.登录 4.2.文件列表 4.3.上传文件测试 4.3.1.测试图片 4 ...
基于 WebSocket、Spring Boot 教你实现“QQ聊天功能”的底层简易demo
目录前言一.分析 1.1.qq聊天功能分析 1.2.WebSocket介绍 1.2.1.什么是消息推送呢? 1.2.2.原理解析 1.2.3.报文格式二.简易demo 2.1.后端实现 2.1. ...

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

spring boot + websocket 简单实现斗鱼弹幕功能相关推荐

最新文章

热门文章