使用Service Bus + SignalR 实现聊天室

在实践本示例之前,你需要已经:
1. 有Azure账号
2. 已经创建了Service bus
3. 有权限部署到Cloud

1. 创建Azure Cloud Service 项目

2. 选择1个WebRole

3. 创建一个Hubs文件夹和ChatHub.cs:

public void Send(string name, string message)
{
   Clients.All.broadcastMessage(name, message, Environment.MachineName, RoleEnvironment.CurrentRoleInstance.Id);
}

4. 安装所需要的nuget:

microsoft asp.net signalR

signalR service bus

5.打开Home/Index.cshtml

添加如下代码(注意你的jquery和signalR版本,做相应替换):

@{
    Layout = null;
}
<html>
<head>

    <link rel="shortcut icon" href="http://icons.iconarchive.com/icons/sora-meliae/matrilineare/96/Status-dialog-information-icon.png">

    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
    <script src="/signalr/hubs"></script>

</head>
<body>
    <div class="container">
        <input type="text" id="message" />
        <input type="button" id="sendmessage" value="Send" />
        <input type="hidden" id="displayname" />
        <ul id="discussion"></ul>
    </div>

    <script type="text/javascript">
    $(function () {

        var newMsg = false;
        var window_focused = false;

        var chat = $.connection.chatHub;
        chat.client.broadcastMessage = function (name, message, machineName, instanceId) {

            newMsg = true;

            var encodedName = $(‘<div />‘).text(name).html();
            var encodedMsg = $(‘<div />‘).text(message).html();
            $(‘#discussion‘).append(‘<li><strong>‘ + encodedName + ‘</strong>:  ‘ + encodedMsg );
        };

        var name = prompt(‘Enter your name:‘, ‘‘);
        $(‘#displayname‘).val(name);

        $("#discussion").append("<li><strong>" + name + " entered" + " room </strong></li>");
        $(‘#message‘).focus();

        $("#message").keydown(function(e) {
            if (e.keyCode === 13) {
                $(‘#sendmessage‘).click();
            }
        });

        function setTitle1() {
            if (newMsg === true) {
                document.title = "New Msg";
                setTimeout(setTitle2, 500);
            }
        }

        function setTitle2() {
            if (newMsg === true) {
                document.title = "";
                setTimeout(setTitle1, 500);
            }
        }

        setInterval(function() {
            if (window_focused === false) {
             setTitle1();
         }
        }, 1000);

        $.connection.hub.start().done(function () {
            $(‘#sendmessage‘).click(function () {
                newMsg = false;

                chat.server.send($(‘#displayname‘).val(), $(‘#message‘).val());
                $(‘#message‘).val(‘‘).focus();

            });
        });

        $(window).focus(function (e) {
            newMsg = false;
            window_focused = true;
        });
    });
    </script>

</body>
</html>

6. 打开Web.config,把ServiceBus的连接串放在AppSetting中:

<add key="ServiceBusConnectionString" value="Endpoint=sb://your string/;SharedAccessKeyName=your key;SharedAccessKey=your key" /></appSettings>

7. 打开App_Star/Starup.Auth.cs

添加如下代码:

GlobalHost.DependencyResolver.UseServiceBus(
            CloudConfigurationManager.GetSetting("ServiceBusConnectionString"), "MyChat");
            app.MapSignalR();

8. Publish你的AzureCloudService到Azure。

时间: 2024-08-09 06:34:35

使用Service Bus + SignalR 实现聊天室的相关文章

[Asp.net 开发系列之SignalR篇]专题三:使用SignalR实现聊天室的功能

一.引言 在前一篇文章中,我向大家介绍了如何实现实现端对端聊天的功能的,在这一篇文章中将像大家如何使用SignalR实现群聊这样的功能. 二.实现思路 要想实现群聊的功能,首先我们需要创建一个房间,然后每个在线用户可以加入这个房间里面进行群聊,我们可以为房间设置一个唯一的名字来作为标识.那SignalR类库里面是否有这样现有的方法呢?答案是肯定的. // IGroupManager接口提供如下方法 // 作用:将连接ID加入某个组 // Context.ConnectionId 连接ID,每个页

Asp.Net SignalR - 简单聊天室实现

原文:Asp.Net SignalR - 简单聊天室实现 简单聊天室 使用持久链接类我们就可以做一些即时通讯的应用了,我使用Group做了一个简单的聊天室,先上图技术细节下面再讲 可以加入聊天室.创建聊天室.发送消息,下面就说说我是如何通过Group做出来的 持久链接类有一个Groups的对象,通过这个对象,我们可以进行分组添加人员.发送消息.删除人员等操作 在连接事件中,给当前游客指定随机名称,并且返回当前已有的聊天室信息 protected override Task OnConnected

SignalR搭建聊天室教程

开发环境:VS2013+.Net4.5+MVC5+jquery.signalR-2.2.0 1.新建项目 选择mvc 2.通过NuGet联机查找SignalR 如图安装第一个 3.在项目目录里添加Hub文件夹,并在里面新建ChatHub类,代码为: public class ChatHub : Microsoft.AspNet.SignalR.Hub { public void Hello() { Clients.All.hello(); } public void Send(string na

asp.net mvc signalr 简单聊天室

signalr的神奇.实用很早就知道,但一直都没有亲自去试用,仅停留在文章,看了几篇简单的介绍文字,感觉还是很简单易用的. 由于最后有个项目需要使用到它,所以就决定写个小程序测试一下,实践出真知:别人写的文章,由于环境(版本等)不同,还是或多或少存在一些出入的. 环境:vs2013 / asp.net mvc 5 / signalr 2.2.1 / jquery 1.10.2 先上两个效果图: 系统会自动给加入聊天室的人员分配一个ID,是该人员的唯一标识(绿色为当前用户说的话,橙色为当前用户之外

使用signalR创建聊天室。

浏览器支持Html5的情况下,SignalR使用WebSockets,当不支持时SignalR将使用其它技术来实现通讯. 界面如下:左侧包含三种聊天对象,不同的聊天对象会创建不同的对话框. 设计思路参考:http://www.blue-zero.com/Chat/ 后台代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Microsoft.AspNet.Sig

Asp.net MVC4 + signalR 聊天室实现

之前介绍了ServiceBus + SignalR的聊天室设计:http://blog.csdn.net/lan_liang/article/details/46480529 如果还没有Azure账号,可以先完成SignalR的实现,这个例子容易上手一些. 如果要了解Service Bus,可以参照这里: https://azure.microsoft.com/en-gb/documentation/articles/service-bus-dotnet-how-to-use-queues/ 这

使用Service Bus Topic 实现简单的聊天室

创建Service Bus能够參照: https://azure.microsoft.com/en-gb/documentation/articles/service-bus-dotnet-how-to-use-topics-subscriptions/ Azure Service Bus做广播和消息通知功能非常合适,而且能够订阅不同的Topic(不同的消息类型或不同的聊天室). 1. 首先须要安装Azure Service Bus的nuget package: 2. 建议安装Azure Ser

ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(一) 之 基层数据搭建,让数据活起来(数据获取)

大家好,本篇是接上一篇 ASP.NET SignalR 与 LayIM2.0 配合轻松实现Web聊天室(零) 前言  ASP.NET SignalR WebIM系列第二篇.本篇会带领大家将 LayIM界面中的数据动态化.当然还不涉及即时消息通讯,如果你已经搞定了数据界面,那么本文您可以简单的看一下,或者略过. 进入正题,layim帮我们定义好了数据规则,我们只要写一个接口实现那个json规范就可以了,剩下的事情就交给layim去做,看一下json格式.(对应文件夹:demo/json/getLi

SignalR实现在线聊天室功能(欢迎、发送、回复、私信、屏蔽)

一.在线聊天室 1.新建解决方案 SignalROnlineChatDemo 2.新建MVC项目 SignalROnlineChatDemo.Web (无身份验证) 3.安装SignalR PM> install-package Microsoft.AspNet.SignalR 4. 创建一个称为 Startup.cs 的新类 1 public class Startup 2 { 3 public void Configuration(IAppBuilder app) 4 { 5 // 有关如何