Skip to content

Instantly share code, notes, and snippets.

@kamlekar

kamlekar/Chat.cs

Created December 5, 2012 12:26
Show Gist options
  • Save kamlekar/4215136 to your computer and use it in GitHub Desktop.
Save kamlekar/4215136 to your computer and use it in GitHub Desktop.
Download ZIP
These are my files related to SignalR chat application which I have created by going through the Quick Hub documentation tutorial.(work still in progress)
Raw
Chat.cs
/*
* Please add your Valuable comments in between the codes where there is a need of modification
* So that I can have a clear goal.
*/
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.AspNet.SignalR.Hubs;
using System.Threading.Tasks;
namespace serverNameExample
{
public class Chat : Hub
{
public void Send(string from, string message, bool blnShowChatName)
{
// Call the addMessage method on all clients
Clients.All.addMessage(from, message, blnShowChatName);
}
//-------------------------------
//The below code part I added after referring the answers for this post http://stackoverflow.com/q/13678493/1577396
//-------------------------------
//what should I write in the User class which was mentioned below ??
static Dictionary<string, User> _users = new Dictionary<string, User>();
// call from client when it goes online
public void Join(string name)
{
var connId = this.Context.ConnectionId;
_users.Add(connId, new User(connId, name));
}
public override Task OnConnected()
{
return Clients.All.joined(_users[Context.ConnectionId], DateTime.Now.ToString());
}
public override Task OnDisconnected()
{
var user = _users[Context.ConnectionId];
_users.Remove(Context.ConnectionId);
return Clients.All.leave(user, DateTime.Now.ToString());
}
public List<User> GetUsers()
{
return _users.Values.ToList();
}
}
}
Raw
default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="serverNameExample._default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script src="Scripts/jquery.signalR-1.0.0-alpha2.min.js" type="text/javascript"></script>
<!-- If this is an MVC project then use the following -->
<!-- <script src="~/signalr/hubs" type="text/javascript"></script> -->
<script src="/signalr/hubs" type="text/javascript"></script>
<script src="Resources/file.js" type="text/javascript"></script>
<link href="Resources/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
Visitors online:
<%= Application["OnlineUsers"].ToString() %>
<div id="chat-outline">
<div id="chat-main">
<div id="chat-inner">
<div id="chat-title">
<div id="chat-title-name">
</div>
</div>
<div id="chat-display">
<div id="messages">
</div>
</div>
<div id="chat-message-outline">
<div id="chat-message">
<asp:TextBox ID="txtmsg" BackColor="Transparent" runat="server" Wrap="true" BorderStyle="None"
TextMode="MultiLine" />
</div>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
Raw
file.js
var showChatName = new Boolean();
showChatName = true;
var chatUsername = window.prompt("Enter Username:", "");
var sameChatName;
$(function () {
chatUsername = chatUsername.toLowerCase().replace(/\b[a-z]/g, function (letter) {
return letter.toUpperCase();
});
sameChatName = chatUsername;
//show Username in Title bar div
$('#chat-title-name').text(chatUsername);
// Proxy created on the fly
var chat = $.connection.chat; //calling the created class "Chat"
// Declare a function on the chat hub so the server can invoke it
chat.client.addMessage = function (chatUsername, message, showChatName) {
if (showChatName) {
$('#messages').append('<b>' + chatUsername + '</b>' + ':&nbsp;' + message + '</br>');
showChatName = false;
}
else {
$('#messages').append('&nbsp;&nbsp;' + message + '</br>');
}
//To keep scroll always bottom
$("#messages").scrollTop($("#messages")[0].scrollHeight);
};
$('#txtmsg').keypress(function (e) {
if (e.which == 13) {
e.preventDefault();
var message = $('#txtmsg').val();
if (message.replace(/\s/g, "").length !== 0) {
chat.server.send(chatUsername, $('#txtmsg').val(), showChatName);
}
$('#txtmsg').val('');
}
});
// Start the connection
$.connection.hub.start();
});
Raw
Global.asax
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
namespace serverNameExample
{
public class Global : System.Web.HttpApplication
{
List<string> list = new List<string>();
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
Application["OnlineUsers"] = 0;
}
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is started
if (Request.IsAuthenticated)
{
list.Add(User.Identity.Name);
}
Application.Lock();
Application["OnlineUsers"] = (int)Application["OnlineUsers"] + 1;
Application.UnLock();
}
void Session_End(object sender, EventArgs e)
{
// Code that runs when a session ends.
// Note: The Session_End event is raised only when the sessionstate mode
// is set to InProc in the Web.config file. If session mode is set to StateServer
// or SQLServer, the event is not raised.
Application.Lock();
Application["OnlineUsers"] = (int)Application["OnlineUsers"] - 1;
Application.UnLock();
}
protected void Application_BeginRequest(object sender, EventArgs e)
{
}
protected void Application_AuthenticateRequest(object sender, EventArgs e)
{
}
protected void Application_Error(object sender, EventArgs e)
{
}
protected void Application_End(object sender, EventArgs e)
{
}
}
}
Raw
style.css
#chat-outline
{
background-color: gray;
width: 16%;
height: 50%;
min-height: 300px;
min-width: 200px;
max-height: 450px;
max-width: 300px;
position: fixed;
bottom: 10px;
right: 10px;
padding: 2px;
}
#chat-main
{
width: 100%;
height: 100%;
background-color: silver;
overflow: hidden;
}
#chat-inner
{
top: 4px;
bottom: 4px;
right: 4px;
left: 4px;
background-color: cornflowerblue;
position: absolute;
}
#chat-title
{
height: 10%;
width: 100%;
background-color: #4B6C9E;
}
#chat-title-name
{
margin-left: 5px; /*margin-top:2px;*/
color: #E8E8FA;
font-family: Verdana;
font-size: medium;
padding-top: 5px;
}
#chat-display
{
height: 70%;
width: 100%;
background-color: #EEEEEE;
position: relative;
}
#chat-display-main, #lblShowMessage, #messages
{
top: 1px;
bottom: 1px;
right: 1px;
left: 1px;
border: 2px solid #E8E8FA;
position: absolute;
}
#chat-display-main b
{
color: cornflowerblue;
}
#messages
{
word-wrap: break-word;
overflow-y: auto;
}
#chat-message-outline
{
height: 20%;
width: 100%;
background-color: #D1D1D1;
position: relative;
}
#chat-message
{
padding: 0;
margin: 0;
top: 2px;
bottom: 2px;
right: 2px;
left: 2px;
background-color: white;
position: absolute;
}
#txtmsg
{
margin: 0;
padding: 0;
border: none;
width: 100%;
height: 100%;
resize: none; /* CSS3 property */
}
​
@kamlekar
Copy link
Author

kamlekar commented Dec 5, 2012

In the above code, I am trying to show usernames of the connected users to all the users connected to a server. I have also asked a question which can be found here http://stackoverflow.com/q/13678493/1577396

@vgheri
Copy link

vgheri commented Dec 5, 2012

Append to

    $.connection.hub.start()
the following code (like I've shown you in my answer on SO):
.done(function () {
                    chat.GetUsers()
                                .done(/_display your contacts_/);
                                    });
                                }).done(function () {
                                    chat.join(chatUsername );
                                });
                });
});

Also you should modify the Join in the Server Hub to notify all the clients that a new client connected, otherwise they will never know its name, for example.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment