SignalR is a very flexible framework to create bidirectional communication between client and server. The general process that is followed won't allow to have strongly typed calls on the server and also in client code. We will look into how to make strongly typed calls on the server through interface and client end through TypeScript.
SignalR - making strong type on server side code
Since client-side methods are very dynamic in nature, so calling those from server side behaves similarly to allow any calls.
SignalR Hubs are derived from Microsoft.AspNet.SignalR.Hub class, there is also a generic version available to follow typed items.
Ex:
The interface is the replication of possible calls that would be received on the client end and calling of client-side methods on server code.
The above interface can be implemented on generic hub inheritance.
After implementation of an interface on Hub, the IntelliSense would come automatically.
That is all on server side code implementation.
Strong type implementation on the client side.
The calls of server and client side callbacks need to be wrapped under interface. The calls are wrapped with server and client properties. Let's have a look at the interface.
The TypeScript get property can be created and parsed based on above interface.
Now, through above property, we can access all methods of server and client calls with intelliSense on TS.
The shown example is skelton of the implementation but it can give an idea how to make SignalR strongly typed.
SignalR - making strong type on server side code
Since client-side methods are very dynamic in nature, so calling those from server side behaves similarly to allow any calls.
SignalR Hubs are derived from Microsoft.AspNet.SignalR.Hub class, there is also a generic version available to follow typed items.
Ex:
The interface is the replication of possible calls that would be received on the client end and calling of client-side methods on server code.
/// <summary>
/// Client(JS) side chatting interface callbacks.
/// </summary>
public interface IChatHub
{
/// <summary>
/// Gets the online users.
/// </summary>
/// <param name="chattingUsers">The chatting users.</param>
void GetOnlineUsers(IEnumerable<ChatAvailableUserOrGroup> chattingUsers);
/// <summary>
/// Determines whether the user is typing.
/// </summary>
/// <param name="userFullName">Full name of the user.</param>
void IsTyping(string userFullName);
/// <summary>
/// Member initialization through login.
/// </summary>
/// <param name="isSuccess">if set to <c>true</c> success login.</param>
void Login(bool isSuccess);
}
The above interface can be implemented on generic hub inheritance.
/// <summary>
/// SignalR Hub for chat application.
/// </summary>
public class ChatHub
: Hub<IChatHub>
{
}
After implementation of an interface on Hub, the IntelliSense would come automatically.
Clients.Caller.IsTyping("viku");
That is all on server side code implementation.
Strong type implementation on the client side.
The calls of server and client side callbacks need to be wrapped under interface. The calls are wrapped with server and client properties. Let's have a look at the interface.
interface SignalRExtended extends SignalR {
chatHub: ChatHub;
}
interface ChatHub
extends HubConnection {
client: { // callbacks on client side through server
GetOnlineUsers(json: string);
ReceiveMessage(message: Model.ChatReceiveMessage);
IsTyping(connectionId: string, message: string);
Login(): boolean;
UserChatHistory(chattingHistory);
};
server: { // Calling of server side hubs
login(): () => void;
sendPrivateMessage(toUserId: string, message: string);
chatHistory(toUserId: number);
groupChatHistory(toGroupId: number);
sendGroupMessage(toGroupId: number, message: string);
userTyping(targettedUserOrGroup: number, requestType: string);
markAsRead(messageIds: Array<number>, targetedUserOrGroup: number, requestType: ChatSourceType);
}
}
The TypeScript get property can be created and parsed based on above interface.
get ChatHub(): ChatHub {
return <ChatHub>(<any>$.connection).chatHub;
}
Now, through above property, we can access all methods of server and client calls with intelliSense on TS.
The shown example is skelton of the implementation but it can give an idea how to make SignalR strongly typed.
Comments
Post a Comment