當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

极简弹幕方案

發布時間：2024/3/24 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了极简弹幕方案小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

重大的活動現場一般離不開 PPT 演示，可是如何有效和現場互動呢？這時候彈幕必不可少，靜態的 PPT 就略顯乏力。有沒有一種好的方案可以二者兼得呢？

如何才能使 PPT 具有交互性，這是一個值得思考的問題！

可能很多童鞋想到了，如果使用「網頁 PPT」，豈不是完美解決了這個問題。本節我們就來提供一種思路，用「PPT + 發射器 + Socket」實現「極簡彈幕方案」。

關于「網頁 PPT」，可以查看我之前的文章「酷炫的 HTML5 網頁 PPT」一探究竟。

一、效果演示

我們先通過一個簡單的視屏演示一下效果：

相關代碼：Demo 地址

二、方案概括

看完上面的演示，是不是迫不及待想知道答案，下面我們來逐步拆分。

先來看看代碼結構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

.
├── README.md
├── mobile
│ ├── README.md
│ ├── node_modules
│ ├── package.json
│ ├── public
│ ├── src
│ └── yarn.lock
├── package.json
├── ppt
│ ├── css
│ ├── extras
│ ├── images
│ ├── index.html
│ ├── js
│ └── temp
├── server
│ ├── app.js
│ ├── data
│ ├── node_modules
│ ├── package-lock.json
│ └── package.json
└── yarn.lock

我們主要關注以下三個目錄：

1.ppt
使用 impressjs 構建的項目，PPT 演講「主屏」，主要演示內容區域，同時接收「服務端」推送彈幕信息。

2.mobile
移動端，下文稱作「發射器」，主要用作現場用戶互動向主屏發送彈幕消息。通過 Create React App 生成，技術棧是：React + Antd。

3.server
服務端，主要接受用戶彈幕，同時廣報到主屏，使用 Socket 實現。

啟動方式：

1.進入 server 目錄，啟動服務：

1	node app.js

此時會啟動一個本機 IP 地址的服務。

2.進入 ppt 目錄，使用 http-server 啟動站點：

1	http-server

注意：接口地址需要替換成本機 IP 地址。

3.進入 mobile 目錄，啟動發射器：

1	yarn start

注意：請求接口需要使用本機 IP 地址。

Demo 比較簡單，主要展示主流程，如果細節過程有問題，歡迎一起探討。

三、主屏細節（核心代碼）

主屏是主要演示版面，我們需要像下面這樣作出 PPT，這里我們做了三個頁面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div id="impress" class="jartto" data-transition-duration="1000">

<div id="cover" class="step slide title" data-x="1000" data-y="1000">
<img src="temp/img/qrcode.png" />
</div>

<div id="award" class="step slide" data-x="2000" data-y="3000">
<h1>請開始你的表演～</h1>
</div>

<div id="change" class="step slide" data-x="2000" data-y="3000" data-scale="5">
<h1>切換 PPT</h1>
</div>

<div id="thank" class="step slide" data-rel-x="0" data-rel-y="3000" data-rotate="90" data-scale="2">
<img src="images/thanks.png" />
</div>

</div>

每個 div 就是一頁 ppt，里面可以隨意排版，data-x 控制位置，data-scale 控制縮放，data-rotate 控制旋轉。

更多 API 文檔，請參考如下文檔：
1.酷炫的 HTML5 網頁 PPT
2.文檔地址

四、實現彈幕

為了更好的理解彈幕，我們來實現一個簡版：
1.定義彈幕結構

1	<div class="jartto_demo">我是彈幕</div>

2.定義移動動畫

1
2
3
4
5
6
7
8
9
10
11

@keyframes barrager{
from{
left:100%;
transform:translateX(0);
transform:translate3d(0, 0, 0);
}
to{
left:0;
transform:translate3d(-100%, 0, 0);
}
}

注意，使用 translate3d 可以開啟 GPU 硬件加速，會比 translateX 更流暢一些。

關于硬件加速，可以關注我之前寫的一篇文章：詳談層合成（composite）

3.使用動畫

1
2
3
4

.jartto_demo{
position:absolute;
animation: barrager 5s linear 0s;
}

OK，我們通過三步實現了一個簡單的彈幕動畫。那么問題來了，彈幕都是隨機位置，隨機速度，隨機顏色出現在屏幕上的，這個該如何實現呢？

4.隨機彈幕出現位置

1
2
3

let window_height = $(window).height() - 150;
bottom = Math.floor(Math.random() * window_height + 40);
code = code.replace(" bottom:{bottom}, //距離底部高度,單位px,默認隨機 \n", '');

5.隨機彈幕顏色

1 2	let color = `#${Math.floor(Math.random() * (2 << 23)).toString(16)}`; console.log(color); // #6e8360

好了，大功告成，我們順手加上 Socket 事件監聽。

6.事件監聽
為了拿到用戶發送過來的彈幕，我們需要做一個事件監聽（接收服務端數據）：
首先，引入 socket.io.js 文件：

1	<script type="text/javascript" src="http://{jartto.ip}/socket.io/socket.io.js"></script>

1
2
3
4
5

const socket = io('http://{jartto.ip}');
socket.on('server-push', function (data) {
console.log('news message >>>>>>>>', data.message);
run(data.message);
});

當我們監聽到 server-push 事件的時候，run 函數就會初始化彈幕方法，隨機生成一條彈幕，在屏幕滑過。

五、發射器細節（核心代碼）

發射器就非常簡單了，我們使用 Create React App 初始化項目，在 src/app.js 中寫入一個表單(這里以 React 為例，Vue 也是大同小異）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<div className="app-box">
<div className="form-box">
<Form.Item {...formItemLayout} label="">
{getFieldDecorator('msg', {
rules: [
{
required: true,
message: '請輸入內容',
},
],
})(<Input size="large" placeholder="發送消息，嗨起來～" />)}
</Form.Item>
<Form.Item {...formTailLayout} >
<Button className="btns" shape="round" icon="close" size="large" onClick={this.cancle}>取消</Button>
<Button type="primary" shape="round" icon="check" size="large" onClick={this.check}>發送</Button>
</Form.Item>
</div>
</div>

用戶在輸入框輸入消息，向我們的服務器發送請求，很簡單，就不贅述了。效果圖可以參考下面：

請注意，此處為了演示效果，我將三端同框了。

六、服務端細節（核心代碼）

服務端比較簡單，使用 Express 初始化一個 Node 項目，向 app.js 寫入如下內容：
1.啟動 Socket 服務：

1
2
3
4
5
6
7
8

const express = require('express'),
bodyParser = require('body-parser'),
socket = require('socket.io'),
fs = require('fs');

const app = express();
const PORT = 4000;
const io = socket(app.listen(PORT, () => console.log(`start on port ${PORT}`)));

2.監聽 Socket 連接，接收用戶發送數據，將數據寫入本地 JSON 文件，并廣播到 server-push 事件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

io.on('connection', sockets => {
console.log('連接成功！');
app.post('/api/send', (req, res, next) => {
// console.log(req.body);
let info = JSON.stringify(req.body.msg);

fs.writeFile('./data/jartto.json', `${info},\n`,
{flag:'a',encoding:'utf-8',mode:'0666'},function(err){
if(err) {
console.log('文件寫入失敗');
res.status(500).send('Error');
} else {
sockets.broadcast.emit('server-push', { message: req.body.msg });
res.status(200).send('Done');
}
})

})

sockets.on('disconnect', () => {
console.log('User Disconnected');
})
});

3.當然，我們也可以存入數據庫做持久化，以下演示存入 MySQL 核心代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

io.on('connection', sockets => {
console.log('連接成功！');
app.post('/api/send', (req, res, next) => {
let {ua, msg} = req.body.msg;
req.getConnection(function(err, cnt) {

let query = cnt.add('INSERT INTO (ua, msg)', {ua, msg}, function(err, rows) {
if (err) {
console.log("Error inserting : %s ",err );
return next(err);
}

sockets.broadcast.emit('server-push', { message: req.body.msg });
res.status(200).send('Done');
})
})

})

sockets.on('disconnect', () => {
console.log('User Disconnected');
})
});

4.啟動服務

1	node app.js

我們的服務端就啟動起來了，訪問地址是你的主機 IP 和 4000 端口。

七、總結

本文我們從零到一搭建了一個完整的彈幕方案，涉及到三部分：主屏，發射器和服務端，旨在為小伙伴們提供一套極簡的設計思路。通過 Demo 我們可以簡單的串聯一個全棧項目，做更多有趣的事情。

文章最后，打個小廣告吧。如果你想搭上在線教育的快車，快速成長，不妨加入我們。一起成長，一起學習，一起挑戰更多有趣的事情，「跟誰學-高途課堂」歡迎你，請將簡歷私我～

總結

以上是生活随笔為你收集整理的极简弹幕方案的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： STM32 STM8 GD32 脱机烧
下一篇：图片上传通用后台模板