弹幕功能通常用于实时显示当前视频或者文档的评论内容，在上快速飞过的方式呈现，看起来比较酷炫。

这种典型的多用户实时交互的功能，很适合使用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脚本

<script src="Scripts/jquery-1.6.4.min.js"></script>
<script src="Scripts/jquery.signalR-2.2.0.min.js"></script>

完整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>
    <!--screen start-->
    <div class="screen">
        <!--s_dm start-->
        <div class="s_dm">
            <a href="#" class="s_close">退出弹幕</a>
            <div class="mask"></div>
            <div class="s_show"></div>
        </div>
        <!--end s_dm-->
        <!--send start-->
        <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>
        <!--end send-->
    </div>
    <!--end screen-->
    <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;
            }

var time = 10000;
            if (bullet.index() % 2 == 0) {
                time = 20000;
            }
            //设定文字的初始化位置
            bullet.css({ left: _left, top: _top, color: getRandomColor() });
            bullet.animate({ left: "-" + _left + "px" }, time, function () {
                bullet.remove();
            });
        });
    }

//随机获取颜色值
    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 {

……………………….

}

三、最终效果

完整代码下载

用SignalR实现的弹幕功能的更多相关文章

  1. Asp.NET MVC 使用 SignalR 实现推送功能二（Hubs 在线聊天室 获取保存用户信息）

    简单介绍 关于SignalR的简单实用 请参考 Asp.NET MVC 使用 SignalR 实现推送功能一(Hubs 在线聊天室) 在上一篇中,我们只是介绍了简单的消息推送,今天我们来修改一下,实现 ...

  2. 【Swift 2.0】实现简单弹幕功能

    前言 简单实现弹幕功能,表跟我谈效率,但也有用队列控制同时弹的数量. 声明 欢迎转载,但请保留文章原始出处:) 博客园:http://www.cnblogs.com 农民伯伯: http://over ...

  3. MVC 中使用 SignalR 实现推送功能

    MVC 中使用 SignalR 实现推送功能 一,简介 Signal 是微软支持的一个运行在 Dot NET 平台上的 html websocket 框架.它出现的主要目的是实现服务器主动推送(Pus ...

  4. Android弹幕功能实现，模仿斗鱼直播的弹幕效果

    转载出处:http://blog.csdn.net/sinyu890807/article/details/51933728 本文同步发表于我的微信公众号,扫一扫文章底部的二维码或在微信搜索 郭霖 即 ...

  5. 在 Asp.NET MVC 中使用 SignalR 实现推送功能 [转]

    在 Asp.NET MVC 中使用 SignalR 实现推送功能 罗朝辉 ( http://blog.csdn.net/kesalin ) CC许可,转载请注明出处 一,简介 Signal 是微软支持 ...

  6. 史上最全面的SignalR系列教程-3、SignalR 实现推送功能-集线器类实现方式

    1.概述 通过前两篇 史上最全面的SignalR系列教程-1.认识SignalR 史上最全面的SignalR系列教程-2.SignalR 实现推送功能-永久连接类实现方式 文章对SignalR的介绍, ...

  7. 使用 SignalR 实现推送功能

    百度搜索:使用 SignalR 实现推送功能

  8. 使用SignalR实现即时通讯功能

    教程简介 SignalR的好处是可以让多个客户端之间进行互动,比如这篇教程就展示了当你在页面上拖动矩形方块的同时,其它打开这个页面的用户也将会看到你拖动的轨迹以及最终的结果,当然他们也可以通过拖动该方 ...

  9. Asp.NET MVC 使用 SignalR 实现推送功能一（Hubs 在线聊天室）

    简介       ASP .NET SignalR 是一个ASP .NET 下的类库,可以在ASP .NET 的Web项目中实现实时通信.什么是实时通信的Web呢?就是让客户端(Web页面)和服务器端 ...

随机推荐

  1. Bringing the activity to foreground 将activity切换到前台

    今天遇到这个问题,找了很久,网上一些解决方法不够完全.特做此记录: 经测试以下方法不能将在后台运行的activity切换到前台运行! Intent i = new Intent(); i.setCla ...

  2. 旅游行业的手机App Top5

    旅游类app分为很多种类,有我们大众认知的典型旅游app像携程旅行,途牛旅游:也有短程的提供代步功能的app,比如滴滴出行,快的打车:还包括我们的火车票,机票的预订app.所以旅游类app是一个很宽阔 ...

  3. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  4. 9月10日，美团网2014校招研发笔试哈尔滨站 1、链表翻转。给出一个链表和一个数k，比如链表1→2→3→4→5→6，k=2，则翻转后2→1→4→3→6→5，若k=3,翻转后3→2→1→6→5→4，若k=4，翻转后4→3→2→1→5→6，用程序实现

    // reverselink.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" struct Node{ int num; struct No ...

  5. Andrion错误解决:cannot be resolved or is not a field

    cannot be resolved or is not a field   解决这个问题:   选择project菜单中的clean,选择你的项目,先clean一下, 再去看看Activity中有没 ...

  6. JAVA中的异常及处理异常的方法

    异常 这是我老师的喜好:就是说一上来就拿一张图给大家看看,过过瘾-_- 这是一张: 异常分类图 来,这里还有一张带中文的常见异常截图!!! 1:先来说说什么是异常吧: 其实就是"阻止当前方法 ...

  7. bitnami redmine每日自动备份

    主要思路:在半夜时停止服务,进行完整备份,然后再开启服务. 1.主脚本backup.bat: call backup-stopserver.batping /n 20 127.1 >nul ca ...

  8. Cas 介绍及使用

    CAS(Central Authentication Service)是Yale大学发起的一个企业级的.开源的项目,旨在为web应用系统提供一种可靠的单点登录解决方法(属于 web sso). 主要特 ...

  9. delphi强制WebBrowser控件使用指定版本显示网页

    function TFrmmain.WriteAppNameToReg:Boolean; var reg:TRegistry; sPath,sAppName:String; Sver:string; ...

  10. fenxi

    线路:通过定义而来(固定线路可以定义,随机和临时线路怎么来) 订单:线路上点对点的关系 装车单:同意线路上的车辆可以有多个订单组成的装车单 车辆任务:给调度接口输入车辆和订单集合,根据订单产生多个车的 ...