用SignalR實現的彈幕功能

2022-02-18 06:13:40 字數 2050 閱讀 4907

這種典型的多使用者實時互動的功能,很適合使用signalr實現,通過signalr提供後台的服務推送功能,客戶端接收訊息後呈現出來。

彈幕功能實現起來有點類似聊天室的功能,只是訊息的展示方式不同,所以結合signalr的推送功能,比較容易實現乙個簡單的彈幕功能。

實現過程

一、服務端

服務端的操作很簡單,只是服務訊息的推送,需要注意的是,服務端僅僅將訊息推送給非當前連線客戶端

step1:

建立乙個empty型別的asp.net 4.5的站點

引入signalr的nuget包,將自動引入相關的關聯包

install-package microsoft.aspnet.signalr

完成之後將自動建立相關的scripts

新建乙個signalr persistent connection class類

將**改成如下

public class bulletscreenconnection : persistentconnection

}step4:

新建乙個startup類,用於配置singalr

將**改成如下

到這一步已經完成了服務端需要的**。

二、客戶端

step 1

新建乙個html頁面,引入如下js指令碼

點選彈幕

退出彈幕

step 2

在scripts目錄下建立bulletscreen.js

$(function () );

connection.received(function (data) );

return false;

});// 點選關閉彈幕

$(".s_close").click(function ()

screen.toggle(600);

return false;

});// 下面部分**參考自

// 重新整理顯示彈幕

function refreshbullets()

var time = 10000;

if (bullet.index() % 2 == 0)

//設定文字的初始化位置

bullet.css();

bullet.animate(, time, function () );

});

}//隨機獲取顏色值

function getrandomcolor() )((math.random() * 0x1000000 << 0).tostring(16))

}

});上述**關鍵部分

1.建立連線

connection = $.connection("/bulletscreenconnection");

connection.received(function (data) );

4.顯示彈幕動畫效果

functoin refreshbullets {

三、最終效果

彈幕功能的實現

在做專案的時候用到了彈幕功能 彈幕的字型大小和顏色也都是隨機的,奉上 html 彈幕 css tool switch container switch type checkbox type radio tool switch container labeljs switch 彈幕 switch la...

Dplayer實現彈幕功能

11645186把外掛程式解壓,放在專案中 匯入css和js 這裡用的flask 看你用什麼語言就用什麼語言匯入靜態資源 script script script 新增樣式 dplayer comment setting type label dplayer style height 500px w...

IOS 實現簡單的彈幕功能

前言 簡單實現彈幕功能,表跟我談效率,但也有用佇列控制同時彈的數量。正文 實現 let danmaku speed cgfloat 150 彈幕每秒移動速度 let danmaku space time nstimeinterval 1 彈幕之間的時間間隔 let danmaku max row 3...