HashFlare

chat room version 1.0 functionality demonstration by gif:

chat room by LIU YUE
chat room by LIU YUE

1.Planning

(all the domains below are fictional)

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

General workflow will be: user log on website.com through oauth.com, on oauth successfully website.com pass access_token to chatroom.com, then last step, chatroom use access_token to retrieve user info from API.com, 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)

Friends

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

Message — Private Message, Group Message

Recently chat list

3.Requirements

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

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

1.Tech

MVC for presentation layer

SignalR for communication layer

Mongodb for db layer

2.Detail

user persistence: session

security: form authentication

 

5.implement

Logic:

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?

 

UI:

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

 

Technical:

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 (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:4512)
at i.l (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:34125)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:35652)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:11987)
at Object.n.event.dispatch (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:8066)
at Object.r.handle (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:4774)
at Object.n.event.trigger (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:7167)
at n.fn.extend.triggerHandler (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:15006)
at s (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:18319)
at Object.u.ajax.success (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:18593)
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 (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:4512)
at i.l (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:34125)
at f (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:32687)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:35854)
at Object.<anonymous> (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:12085)
at Object.n.event.dispatch (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:8066)
at Object.r.handle (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:4774)
at Object.n.event.trigger (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:7167)
at n.fn.extend.triggerHandler (http://chatroom.24popcorn.com/Content/js/jquery-latest.min.js:3:15006)
at Object.r.fn.r.stop (http://chatroom.24popcorn.com/Scripts/jquery.signalR-2.2.0.min.js:8:13160)

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

solution:

queue before send calling, using Jquery.defferred Promise

http://stackoverflow.com/questions/17308172/deferred-versus-promise

http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

http://www.vasanthk.com/jquery-promises-and-deferred-objects/

signalr error

invalid-operation-exceptioninvalid-operation-exception-req

Finally!!! Let’s meet the murderer !!!

[InvalidOperationException]: An asynchronous module or handler completed while an asynchronous operation was still pending.

http://stackoverflow.com/questions/17659603/async-void-asp-net-and-count-of-outstanding-operations
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.

http://www.wiliam.com.au/wiliam-blog/async-void-dont-use-it
https://msdn.microsoft.com/en-us/magazine/jj991977.aspx

3.query in MongoDB using C# Driver

http://stackoverflow.com/questions/24169849/searching-an-array-of-objects-in-mongodb-using-the-c-sharp-driver

http://stackoverflow.com/questions/5457637/mongodb-field-array-searching-c-how-to?rq=1

http://stackoverflow.com/questions/25727553/querying-an-array-of-arrays-with-the-mongodb-c-sharp-driver?rq=1

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)

http://kevgriffin.com/maintaining-signalr-connectionids-across-page-instances/

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

 

 

CookieAuthenticationSample

Using ajaxSetup beforeSend for Basic Auth is breaking SignalR connection

2.detail

Understanding and Handling Connection Lifetime Events in SignalR

 

emoticon

 

video:

resources:

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

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.

http://www.asp.net/signalr/overview/guide-to-the-api/hubs-api-guide-server#callfromoutsidehub

http://henriquat.re/server-integration/signalr/integrateWithSignalRHubs.html

 

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#

 

Debug:

websocket_frames[box title=”SignalR Message Format”]

— http://blogs.microsoft.co.il/applisec/2014/03/12/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)

Data={“I”:index,”H”:”samplingstreaminghub”,”M”:”ConnectToStream”,”A”:[“StreamUri”]}

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).

[/box]

 

reference:

MongoDB:

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傳輸方式剖析 http://blog.darkthread.net/post-2013-12-03-inside-signalr-transport.aspx

A chatroom for all! http://blogs.msdn.com/b/cdndevs/archive/2014/09/04/node-js-tutorial-series-a-chatroom-for-all-part-1-introduction-to-node.aspx

 

友荐云推荐

SIMILAR ARTICLES