用SignalR實現的彈幕功能_ZenDei技術網路在線

彈幕功能通常用於實時顯示當前視頻或者文檔的評論內容，在上快速飛過的方式呈現，看起來比較酷炫。這種典型的多用戶實時交互的功能，很適合使用SignalR實現，通過SignalR提供後臺的服務推送功能，客戶端接收消息後呈現出來。彈幕功能實現起來有點類似聊天室的功能，只是消息的展示方式不同，所以結合Si ...

彈幕功能通常用於實時顯示當前視頻或者文檔的評論內容，在上快速飛過的方式呈現，看起來比較酷炫。

這種典型的多用戶實時交互的功能，很適合使用SignalR實現，通過SignalR提供後臺的服務推送功能，客戶端接收消息後呈現出來。

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

實現過程

一、服務端

服務端的操作很簡單，只是服務消息的推送，需要註意的是，服務端僅僅將消息推送給非當前連接客戶端

step1：

創建一個Empty類型的ASP.NET 4.5的站點

step2:

引入SignalR的nuget包，將自動引入相關的關聯包

Install-Package Microsoft.AspNet.SignalR

完成之後將自動創建相關的Scripts

step3：

新建一個SignalR Persistent Connection Class類

將代碼改成如下

public class BulletScreenConnection : PersistentConnection
{
       protected override Task OnReceived(IRequest request, string connectionId, string data)
       {
            return Connection.Broadcast(data, connectionId);
       }
}

step4：

新建一個startup類，用於配置SingalR

將代碼改成如下

public class Startup
{
       public void Configuration(IAppBuilder app)
       {
            app.MapSignalR<BulletScreenConnection>("/bulletScreenConnection");
       }

}

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

二、客戶端

step 1

新建一個Html頁面，引入如下js腳本

完整html代碼(相關的css代碼在文檔附件中有)

<!DOCTYPE html>
<html>
<head>
    <title>SignalR實現的彈幕效果</title>
    <meta charset="utf-8" />
    <link href="BulletScreen.css" type="text/css" rel="stylesheet"/>
</head>
<body>
    <a href="#" id="click_screen">點擊彈幕</a>
    
    <div class="screen">
        
        <div class="s_dm">
            <a href="#" class="s_close">退出彈幕</a>
            <div class="mask"></div>
            <div class="s_show"></div>
        </div>
        
        
        <div class="send">
            <div class="s_con">
                <input type="text" class="s_userName" placeholder="用戶名"/>
                <input type="text" class="s_txt" placeholder="評論" /><input type="button" class="s_btn" value="發表評論" />
            </div>
        </div>
        
    </div>
    
    <script src="Scripts/jquery-1.6.4.min.js"></script>
    <script src="Scripts/jquery.signalR-2.2.0.min.js"></script>
    <script src="Scripts/BulletScreen.js"></script>
</body>
</html>

step 2

在Scripts目錄下創建BulletScreen.js

$(function () {
    var clickScreen = $("#click_screen");
    var screen = $(".screen");
    var userNameBox = $(".s_userName");
    var commentBox = $(".s_txt");
    var bulletArea = $(".s_show");
    var commentButton = $(".s_btn");
    var connection = null;

    // 點擊展開彈幕
    clickScreen.click(function () {
        // 創建連接
        connection = $.connection("/bulletScreenConnection");
        connection.start().done(function () {
            screen.toggle(600);
        });
        connection.received(function (data) {
            var bulletObj = JSON.parse(data);
            // 接收伺服器推送過來的彈幕消息
            addBullet(bulletObj.userName, bulletObj.comment);
        });
        return false;
    });

    // 點擊關閉彈幕
    $(".s_close").click(function () {
        if (connection != null) {
            // 關閉伺服器連接
            connection.stop(true, true);
            connection = null;
        }
        screen.toggle(600);
        return false;
    });

    // 發表評論
    commentButton.click(function () {
        var userName = userNameBox.val();
        var comment = commentBox.val();
        if (userName == "" && comment == "") {
            alert("請輸入用戶名和評論");
            return false;
        }
        addBullet(userName, comment);
        connection.send({ userName: userName, comment: comment });
    });

    // 按回車發表評論
    commentBox.keydown(function () {
        var code = window.event.keyCode;
        if (code == 13)//回車鍵按下時，輸出到彈幕
        {
            commentButton.click();
        }
    });

    function addBullet(userName, comment) {
        bulletArea.append("<div>" + userName + ":" + comment + "</div>");
        refreshBullets();
    }

    // 下麵部分代碼參考自http://www.zyfun.cn/2015/04/81/
    // 刷新顯示彈幕
    function refreshBullets() {
        var _top = 0;

        bulletArea.find("div").show().each(function () {
            var bullet = $(this);
            var _left = $(window).width() - bullet.width();
            var _height = $(window).height();

_top = _top + 80;

            if (_top > _height - 100) {
                _top = 80;
            }

    //隨機獲取顏色值
    function getRandomColor() {
        return '#' + (function (h) {
            return new Array(7 - h.length).join("0") + h
        })((Math.random() * 0x1000000 << 0).toString(16))
    }
});

上述代碼關鍵部分

1.創建連接

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

2.接收伺服器推送過來的其他用戶提交的評論

connection.received(function (data) {
            var bulletObj = JSON.parse(data);
            // 接收伺服器推送過來的彈幕消息
            addBullet(bulletObj.userName, bulletObj.comment);
});

3.發表評論同時將評論內容發送給服務端
commentButton.click(function () {
      var userName = userNameBox.val();
      var comment = commentBox.val();
      if (userName == "" && comment == "") {
          alert("請輸入用戶名和評論");
          return false;
      }
      addBullet(userName, comment);
      connection.send({ userName: userName, comment: comment });
});

4.顯示彈幕動畫效果

functoin refreshBullets {

……………………….

}

三、最終效果

完整代碼下載