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("" + message + " 
后端代码主要是 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 {
@Override
public void configureMessageBroker(MessageBrokerRegistry config) {
config.enableSimpleBroker("/topic");
// 客户端以app开头的消息会被处理
// 比如 app/xxx 会被加了 @MessageMapping("/xxx") 方法处理
// @SendTo("/topic/greetings"),必须在 @MessageMapping的方法上面
config.setApplicationDestinationPrefixes("/app");
}
@Override
public 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 {
@Autowired
private 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", "任务跑完了");
}
}