Getting up and running with long polling

Long polling is a good tecnique for sending live data from the server to the client. However, it may get a little tricky when you have multiple data formats. For instance, ChatJS has three different data formats: One for when the users list change, another for new messages, and a last one for when the other using is typing. How do you make sure that the proper client function is going to be called for that particular data format when it arrives in the client?

To solve the above problem, ChatJS defines two function: $.addLongPollingListener() and $.startLongPolling().

The first one, addLongPollingListener, will define that, for a given data-format, the passed in function must be called. Example

$.addLongPollingListener("chat",
	// success
	function (event) {
		if (event.EventKey == "new-messages")
			for (var i = 0; i < event.Data.length; i++)
				chat.client.sendMessage(event.Data[i]);
		else if (event.EventKey == "user-list")
			chat.client.usersListChanged(event.Data);
		// other checks
	},
	// error
	function (e) {
		// error handling here
	}
);

The first parameter is just an identifier so the passed in function will only be called if the server response specifies this context. In this example, the passed in function will only be called if the event coming from the server has the "chat" EventKey. The reason for this is that, if you had other long polling contexts like client notifications, you wouldn't want to have multiple long polling requests. So you create a single long polling request and pass the context as a parameter.

The second one, startLongPolling, will actually call an URL and wait for long polling events. Example:

$.startLongPolling('/longpolling/getevents');

When you create an instance of the LongPollingAdapter to pass into ChatJS, you can specify the end-points in the options object. Example options:

{
	sendMessageUrl: '/chat/sendmessage',
	sendTypingSignalUrl: '/chat/sendtypingsignal',
	getMessageHistoryUrl: '/chat/getmessagehistory',
	userInfoUrl: '/chat/getuserinfo',
	usersListUrl: '/chat/getuserslist'
}

Long polling adapter data format

Every adapter instance has a server object with some particular methods that can be called by the chat instance when it needs to contacts the server. In the case of the long polling adapter, all these methods are going to do HTTP requests passing some data and expecting data in return. This section covers the data format for this communication.

LongPollingAdater.server.sendMessage()

Default end-point: /chat/sendmessage (POST). Example: http://localhost:51326/chat/sendmessage?clientGuid=1f6801c6-53fb-04e2-5c90-50f7897cb532&message=testing&otherUserId=72068.

Parameters: otherUserId: The id of the other user. The id of the current user is expected to be obtained from the user authentication cookie in the server. message: The message to the other user. clientGuid: This GUID makes it possible to identify this message when it returns from the server. It seems weird but all messages you send come back to the caller. This happens for 2 reasons: 1) This gives the sender an evidence that the receiver might be received it. 2) This allows for all your opened windows to be synchronized, that is, if you have three opened browser windows and send a message to another user in one of them, the other two must have that too.

Expected result: 200 OK.

Example

LongPollingAdater.server.getuserslist()

Gets the current users list in your chat room. Your chat room is not passed as a parameter, you are expected to find this information through the current user authentication or a separate cookie. The current user included in this list is optional. It may only contain the other users.

Default end-point: '/chat/getuserslist'.

Parameters: None.

Expected result:

{
   "Users":[
      {
         "Id":59382,
         "Name":"John",
         "Url":null,
         "ProfilePictureUrl":"https://www.gravatar.com/avatar/1f9d9a9efc2f523b2f09629444632b5c?s=32\u0026r=PG\u0026d=mm",
         "Status":1,
         "Email":"[email protected]",
         "RoomId":"chatjs-room"
      }
   ]
}

LongPollingAdater.server.getMessageHistory()

Everytime a new chat window is opened between user A and B. The message history must be retrieved.

Default end-point: '/chat/getmessagehistory'.

Parameters: otherUserId: The id of the other user. The id of the current user is expected to be obtained from the user authentication cookie.

Expected result:

{
   "Messages":[
      {
         "UserFromId":59382,
         "UserToId":64579,
         "Timestamp":635152806158139662,
         "Message":"test message",
         "ClientGuid":"719ecd3c-5c5b-4cba-172b-e1b5b7a8ed98",
         "DateTime":"\/Date(-62135575200000)\/"
      }
   ],
   "Timestamp":"635152806158719720"
}

THIS DOCUMENTATION IS STILL BEING WRITTEN. **EXPECT MORE HERE**.

Related resources:

• Understanding the internals of a ChatJS adapter
• Using the SignalR adapter