使用SignalR构建一个最基本的web聊天室

What is SignalR

ASP.NET SignalR is a new library for ASP.NET developers that simplifies the process of adding real-time web functionality to your applications. Real-time web functionality is the ability to have server-side code push content to connected clients instantly as it becomes available.

You may have heard of the HTML5 WebSocket API that enables efficient bidirectional communication between the browser and server. SignalR uses Websockets when it is supported by the browser and the server, and gracefully falls back to other techniques and technologies when it is not. Either way, your application code stays the same.

SignalR provides a simple ASP.NET API for creating server-to-client remote procedure calls (RPC) that call JavaScript functions in client browsers from server-side .NET code. SignalR also includes API for connection management (for instance, connect and disconnect events), grouping connections, and authorization.

上面是http://www.asp.net/signalr 的介绍。

本人英文不太好,简单翻译一下就是:SignalR是一个新的类库,它为ASP.NET开发者提供一个更简单的途径实现实时在线功能。SignalR可以实现服务端推送内容到客户端的功能。SignalR通过HTML5的WebSocket来实现服务端跟浏览器的通信。如果浏览器不支持WebSocket 那么就用其他的技术来实现。不管哪种技术,最后都是同样的效果。SignalR提供一组简单的ASP.NET API去构建RPC功能。它可以通过服务端代码去调用前端的javascript方法。SignalR同样为连接管理,群组连接,权限等提供了API。

/*以下不是翻译*/

SignalR非常微软,它被微软封装的非常易用。不管是后台类库,还是前端javascript都已经被你封装好了。SignalR依赖JQuery。SignalR的实现原理类似WCF,使用javascript代理类来调用服务端的方法。废话不多了上代码吧。

后台:

新建一个空的MVC项目,添加一个最基本的View跟Controller这个就不废话了。

在Global.asax的Start方法下面添加:

  RouteTable.Routes.MapHubs();

初始化hub。

在在解决方案下新建文件夹:Hub。添加一个类叫ChatHub:

  public class ChatHub : Microsoft.AspNet.SignalR.Hub
    {
        public void Send(string name, string message)
        {
            //send message to all pages
            Clients.All.SentMsgToPages(name, message);
        }
    }
啊,太简单了。只有一个方法一行代码。这个Send方法是提供给Client调用的。其中SentMsgToPages这是个动态方法,它表示前端的回调方法。也就是说Client调用Send方法把name跟message传回server,然后server会回调所有的连接的client的SentMsgToPages方法,把name跟message提供到client。

前台:

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/jquery.signalR-1.1.2.js"></script>
<script src="~/signalr/hubs"></script>

<script type="text/javascript">
    var chat = $.connection.chatHub;
    chat.client.SentMsgToPages = function (name, message) {
        // Add the message to the page. 
        $('#msgUl').append('<li><strong>' + name
            + '</strong>: ' + message + '</li>');
    };
    function sendMsg() {
        var userName = $("#userName").val();
        if (!userName) {
            $(".alert").show();
            return;
        }
        var msg = $('#messageBox').val();
        if (msg) {
            chat.server.send(userName, msg);
            $('#messageBox').val('').focus();
        }
           
    }
    $.connection.hub.start().done(
        function() {
            //设置按钮事件
            $("#btnSent").click(
                    sendMsg
            );
            $("#userName").focus(
                function () {
                    $(".alert").hide();
                }
            );
        }
        );
    $(document).ready(
        function () {
            //设置高度
            var msgListH = window.innerHeight - 150;
            $(".messageList").height(msgListH);
            $('#messageBox').keypress(
                function(e) {
                    var key = e.keyCode;
                    if (key == 13) {
                        sendMsg();
                    }
                }
                );
        }
    );
</script>
<h2>SignalR Chat Room</h2>
<div style="width: 99%;margin: 4px" id="outBoard" >
    <div  class="messageList" >
        <ul id="msgUl" class="unstyled">
            
        </ul>
    </div>
    <div class="form-inline">
        <input type="text" id="userName" placeholder="昵称" class="input-mini" />
        <input type="text" id="messageBox"  class="input-xxlarge"/>
        <input type="submit" value="发送" class="btn btn-info" id="btnSent" />
    
    </div>
      <div class="alert" style="display: none; width: 100px">
            必须输入昵称!
        </div>
</div>

前台除去HTML其实也很简单。最关键的也就3句话。
1 var chat = $.connection.chatHub;
客户端跟服务端建立连接。
2 chat.client.SentMsgToPages = function (name, message) { };
这就是服务端回调客户端的方法,给SentMsgToPages实现一个function表示如何处理返回值,这里当然是把message添加到聊天记录列表里。
3 chat.server.send(userName, msg); 
客户端通过chat对象调用服务端的send方法,把数据传回到服务器。

效果:

我们如此简单的就实现了一个最基本的聊天室,SignalR当然还可以做网页通知的推送,实时的进度条等等。这对ASP.NET程序员来说真是又一个神器。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏林德熙的博客

win10 uwp 获取按钮鼠标左键按下

我们可以使用PointerPressed获得鼠标右键按下,但是我们如何获得左键? UWP 左键按下经常获取不到,本文:如何获得鼠标按下

571
来自专栏jeremy的技术点滴

atom-shell_mac版应用打包

3936
来自专栏守望轩

Visual Studio 2008 每日提示(一)

Visual Studio 2008 每日提示(tip of day )是2007年7月Sara Ford在她的博客里推出了VS 2008每日提示系列,里面收集...

3637
来自专栏DeveWork

Genericons:又一个Icon Fonts 集合项目( Automattic出品)

之前在《WordPress 开发之使用WordPress 3.8+后台图标(dashicons)》一文中介绍过WordPress 的一个Icon Fonts 项...

1968
来自专栏葡萄城控件技术团队

Spread for Windows Forms快速入门(10)---绑定到数据库

下面的教程将带你创建一个工程, 并将Spread控件绑定到一个数据库。 在这个教程中,主要的步骤为: 1. 将Spread添加到一个数据绑定工程中 2. 设置数...

1799
来自专栏林德熙的博客

WPF 高性能笔

如果需要经过路由事件才收到输入,如果有人在路由事件做了很多需要很长事件的代码,那么等待用户的路由事件就会使用很长的时间。

864
来自专栏Python

配置PyCharm(背景色+字体大小+解释器选择)

首先配置PyCharm的背景,快捷键组合,视图模式和风格。 ? 使用快捷键Ctrl + "`"(该键位于键盘的左上角,和”~“同一个键位),即可开发上图配置选项...

3726
来自专栏進无尽的文章

基础篇-Welcome to Xcode

Command + Shift + K:清除工程: Command + B :构建应用 commond + r 启动模拟器 commond + . 停止模...

801
来自专栏菩提树下的杨过

Silvelright:ListBox无法用Tab顺序切换内部元素焦点的解决

默认情况下,Silverlight自带的ListBox控件如果内部有多个TextBox,用户无法用键盘上的Tab键,在ListBox内部的TextBox之间切换...

21910
来自专栏liulun

学习WPF——了解路由事件

入门 我们先来看一个例子 前台代码: 后台代码: 点击按钮的运行效果 第一个弹出窗口 第二个弹出窗口: ...

1967

扫码关注云+社区