Online chat room from NULL 聊天室开发

8 minute read

chat room version 1.0 functionality demonstration by gif


(all the domains below are fictional)

Now I have a web site, an Oauth2 server, and an API server/Resource server,access restricted through oauth only, now I am asked to create an online chatting room for, which will be embedded in using iframe, assume domain is

General workflow will be: user log on through, on oauth successfully pass access_token to, then last step, chatroom use access_token to retrieve user info from, this process is also considered as logon chatroom.

My colleague suggests me to use signalr, compare to super socket, it’s much more easy to draw UI because UI for such an online chatting room is very complicated, another advantage of signalr is that it supports long-polling, means those browsers not supporting websocket will also works fine, while the disadvantage is I need to maintain my own ‘sessions’, signalr or most web sockets do not support session feature by default.( why? answer in my blog ‘About Session’ )

2.Business Modeling

Domain Modeling ( use case driven approach,the task of discovering ‘objects’ that represent those business entities and concepts)

User(name,online status)


Conversation Room – chat group (name, creator,members,status)

Message – Private Message, Group Message

Recently chat list


when user successfully connected with server,If he doesn’t have nickname yet, required to update user info through

after checking nickname, he will be auto assigned to one of the lobbies(system setting channels);

user can switch channels, can check users online status and add friends,

start private conversation with friends,

create chat group with selected friends,manage chat group, invite friend, kick out member.

system will keep track of users’ recently chat records,

missed messages will push to user as soon as he get online.

4.Analysis & Design

4.1 Tech

MVC for presentation layer

SignalR for communication layer

Mongodb for db layer

4.2 Detail

user persistence: session

security: form authentication

CookieAuthenticationSample Using ajaxSetup beforeSend for Basic Auth is breaking SignalR connection

Understanding and Handling Connection Lifetime Events in SignalR

Emoticons (Verify Code e4d6) 聊天表情源码 提取码 e4d6



signalr reconnect?

rejoin room ? missed message push?

session lost handling? token expired handling?

fallback handling,go back to client side, ask for new token ?

performance enhancement?

code refactor?


Show Loading tips before enter/switch room and disable page event


1.signalR life cycle

SignalR connection OnConnected OnReConnected OnDisconnected

Transport connection

negotiate –> connect –> start–> send….—> reconnect

(reconnect every 5s,on 30s throw hub error:

Error: Couldn’t reconnect within the configured timeout of 30000 ms, disconnecting. {source: “TimeoutException”, stack: (…), message: “Couldn’t reconnect within the configured timeout of 30000 ms, disconnecting.”}

Error: The client has been inactive since Wed May 13 2015 15:27:25 GMT+0800 (China Standard Time) and it has exceeded the inactivity timeout of 50000 ms. Stopping the connection. {source: “TimeoutException”, stack: (…), message: “The client has been inactive since Wed May 13 2015…ity timeout of 50000 ms. Stopping the connection.”}

), then abort (check network) $.signalR.connectionState Object{connecting:0, connected:1, reconnecting:2, disconnected:4} error: connect before call

solution: block user before connected,e.g. using overlap loading.

2. send failed error

ChatHub.Send failed: chatroom.js:351 Error: Error: Send failed. at Object.r._.error ( at i.l ( at Object.<anonymous> ( at Object.<anonymous> ( at Object.n.event.dispatch ( at Object.r.handle ( at Object.n.event.trigger ( at n.fn.extend.triggerHandler ( at s ( at Object.u.ajax.success ( chatroom.js:118 SignalR error: Error: Send failed. chatroom.js:662 ChatHub.Send failed: chatroom.js:663 Error: Connection was disconnected before invocation result was received. at Object.r._.error ( at i.l ( at f ( at Object.<anonymous> ( at Object.<anonymous> ( at Object.n.event.dispatch ( at Object.r.handle ( at Object.n.event.trigger ( at n.fn.extend.triggerHandler ( 5006) at Object.r.fn.r.stop (

reason:another asynchronous call still in processing, may cause dead lock


queue before send calling, using Jquery.defferred Promise

Finally!!! Let’s meet the murderer !!! Regarding “fire and forget”: I personally never use this phrase for async void methods. For one thing, the error handling semantics most certainly do not fit in with the phrase “fire and forget”; I half-jokingly refer to async void methods as “fire and crash”. A true async “fire and forget” method would be an async Task method where you ignore the returned Task rather than waiting for it. That said, in ASP.NET you almost never want to return early from requests (which is what “fire and forget” implies). This answer is already too long, but I have a description of the problems on my blog, along with some code to support ASP.NET “fire and forget” if it’s truly necessary.

3.query in MongoDB using C# Driver

4.httpcontext session/cookie is null with IE

You can try the following code by adding in Global.asax file

protected void Application_BeginRequest(object sender, EventArgs e) { HttpContext.Current.Response.AddHeader(“p3p”, “CP="CAO PSA OUR"”); } The problem lies with a W3C standard called Platform for Privacy Preferences or P3P. This will allow Internet Explorer to accept your cookie. You will need to send the header on every page that sets a cookie.

5.Page refresh, SignalR disconnect and connect again and assign new connectionID, but how to maintain state(First Connection Time and current conversation state)

solution: Maitain your own SessionList, OnDisconnected mark check session state, if previous online=true, set online=false and remove connectionID from , else remove session, when OnConnected check session, if find user in session and previous online=false, set it true, and add new connectionID

6.Configuration Management

release maintenance

7.Continuous Integration

another system which is the back end system need to interact with chatroom, e.g. from back end system, admin can ‘push’ messages to all clients connected with chatroom,

back end system was implemented using .net c# technology,

issues: I am using Form Authenticate with ChatHub which is the only hub I have so far. JS Clients connect to it after authentication.

solution: add one more hub to interact with .net client, this new hub need also keep reference of ChatHub to notify all JS Clients connected to it.

errors encountered:

signalr Unexpected character encountered while parsing value: <. Path ‘’, line 2, position 1.

reason: failed to connect to the hub, check whether you called the correct path or is there any authentication requires towards your hub.

b.further more, I was asked to make the ‘push’ message be periodic, so I decided to use timer, soon I found the issue, I cannot do async operations inside a timer(threading timer)

solution in my the other blog Code Snippets Series – C#


SignalR Message Format


Messages are serialized as JSON objects and contain metadata about the handlers and the connection as well as payload (i.e. the data to transfer) The following information is included in the messages:

  • Hubs (H): Handlers (i.e methods) on the server as well as on the clients are grouped in “Hubs”.
  • Method (M): The name of the Handler that will process the message.
  • Groups: Clients can be grouped on the servers in “groups” for pub-sub implementation.
  • Arguments (A): The actual content to be passed to the hander on the client or on the server.
  • Cursor (C): Represents a position in the message stream.
  • Index (I): The Id of the handler or Callback. Hub Message Format

Hub Request format (“send” request)


Hubs messages format (server to client)

  • {“C”:”messageId value”, “M”:[{“H”:”HubName”,”M”:”HandlerName”,”A”: [“argument list as json”]}]}

  • {“C”:”messageId value”, “G”: [“groupName”],”g”: [“groupName”],”T”:1, “M”:[{“H”:”HubName”,”M”:”HandlerName”,”A”: [“argument list as json”]}]}

Hub Payloads format (“send” request or inside “M” element of Hub message)

  • {“H”:”HubName”,”M”:”HandlerName”,”A”: [argument list as json],                                    “S”:{state as json},”I”:index}
  • {“H”:”HubName”,”M”:”HandlerName”,”A”: [argument list as json],”I”:index} Hub Response examples (“send” response)
  • {“I”:”0”,”R”:{“return object as json}}
  • {“I”: 0} -> no result
  • {“I”: 0, “S”:{“x”:1},”R”:1} –> result
  • {“I”: 0, “E”:”This is an error”} –> error
  • {“I”: 0, “E”:”This is an error”, “T”: “Some stack trace here”} -> error + stack The following is a complete list of the messages elements: Hub Messages:

C – Cursor M – Messages T – Timeout (only if true) value is 1 D – Disconnect (only if true) value is 1 R – All Groups (Client groups should be reset to match this list exactly) G – Groups added g – Groups removed

Hub payload:

I – Callback Operation index H – Hub name M – method name A – arguments S – state (if not null)

Hub Method return value:

I – Operation index R – Result S – State E – Error T – stack trace D – Error Data

The cursor mechanism As described above the message contains a cursor for identifying the location in the stream. A cursor represents where a particular client is in an infinite stream of messages. If the client disconnects and then reconnects, it asks the OI streaming API for any messages that arrived after the client’s cursor value. The same thing happens when a connection uses long polling. After a long poll request completes, the client opens a new connection and asks for messages that arrived after the cursor.

To find more information download the signalR source code from github. To find the message format just search for json serialization attributes (by searching for “M” for example).



High Performance Search using MongoDB and ASP.NET MVC

Authentication: Storing Custom Data in Forms Authentication Tickets form authentication timeout not working Authentication with SignalR and OAuth Bearer Token Set Context User Principal for Customized Authentication in SignalR

Session: Real-time User Notification and Session Management with SignalR

UI: jQuery plugin to style emoticons with pure CSS3 properties (no images) Open sourcing Twitter emoji for everyone jquery.qqFace.js 纯JS+MVC 打造Web实时聊天室

relevant question: How to do forms authentication with SignalR (separate domains)? SignalR 2.0 in VS2012 registration and Dependency Injection Passing and verifying the OWIN Bearer token in Query String in WebAPI Web API / OWIN, SignalR & Authorization Unable to Identify User Context in SignalR hub decorated with “Authorize” attribute Context.User is Null on Authorized SignalRHub Task OnDisconnected Integrating SignalR with existing Authorization How do I authorize access to ServiceStack resources using OAuth2 access tokens via DotNetOpenAuth? JSON Web Token in ASP.NET Web API 2 using Owin 【打破砂鍋系列】SignalR傳輸方式剖析

A chatroom for all!