Skip to content

ASP.NET SignalR continuation

Today I am going to continue talking about SignalR and your operation with swap of messages among users. In first article, I gave a introduction about SignalR and case you don’t have seen this is the link.

As sample, we go to see a tic-tac game. In this app, the user must register your name and after is visualized the rooms for plays. Each room must receive only two users. The idea of to use SignalR is that each move must to be sent in real-time to opponent and the information of each room will be sent for all users of system.

The app is on GitHub and now I am going to explain about some objects of system.

• The TicTacToeHub class of web project is the SignalR class responsible by message traffic management.

• The TicTacToeService class of model project is the class responsible by application services.

• The Java Script jquery.tictactoe-* that is in folder scripts of web project is responsible by communication of browser with the server. In this script, there are functions of listen and access with server.

After of explanation above, going to see more the deep the operation of system.

A observation: this application do not go to use data base, so the class that implement SignalR is responsible by get an static instance of TicTacToeService, therewith all information stay in service memory, as sample below:

[sourcecode language=”csharp”]

private TicTacToeService _service;

public TicTacToeHub()
{
_service = TicTacToeService.GetInstance();
}

[/sourcecode]

When the user accesses the system and register your name, the application begins the function below:

[sourcecode language=”javascript”]

function StartConnectionHub() {

proxy = $.connection.ticTacToeHub;

proxy.state.PlayerName = $(‘#Name’).val();

proxy.client.changeRoom = function (result) {

CreateRooms(result);

};

proxy.client.startGame = function (player) {

startGame(player);

};

proxy.client.prepareMove = function (player) {

prepareMove(player);

};

proxy.client.cellMarker = function (cel, symbol) {

cellMarker(cel, symbol);

};

proxy.client.playerWinner = function (player) {

playerWinner(player);

};

proxy.client.finishedGame = function () {

finishedGame();

};

proxy.client.opponentGiveUp = function () {

opponentGiveUp();

};

$.connection.hub.start().done(

function () {

GetListRooms();

});

}

[/sourcecode]

As already saw in first article, have that to create an SignalR instance object, in this case we are talking of TicTacToeHub class. After, the StartConnectionHub function prepares the functions to listen the server. A sample is the ChangeRoom named function that is called by server for all the clients when a room is changed (score, entry or exit of player). Each listening function must to be called before of instruction of connection.

Notice that to configure “changeRoom” as a listening function, before we need to create the “proxy” variable, after, we use the “client” property of “proxy” variable and by last is given function name (“changeRoom”) that the server will call. Here begins the real-time message, because the server can to call all the clients anytime it want.

A thing interesting that we are doing in moment of connection with SignalR is to utilize the “Done” function. This function is responsible by wait the success of connection, also can to be utilized by wait a custom method in server. In our case, we are waiting to after to execute the “GetListRooms” function to view all rooms of games.

Other thing interesting to who read this article, is the process how SignalR calls clients or a specific client and the process that a client calls the server. In this project we have the two forms:

• Client calls server

[sourcecode language=”javascript”]

function GetListRooms() {

proxy.server.getListRooms().done(

function (rooms) {

CreateRooms(rooms);

});

}

[/sourcecode]

Notice that we are calling the “proxy” variable, which was created at the start, and then a property named “server”, that in this case is our TicTacToeHub class that contain the method GetListRooms.

Notice that more a time we are utilizing the “done” function to wait the end of server method e get the room list. This is amazing!

[sourcecode language=”csharp”]

public IList<Room> GetListRooms()

{

return _service.GetListRooms();

}

[/sourcecode]

Why call by client the method with lower case (getListRooms) and call by server with upper case (GetListRooms)? When we utilize SignalR the JavaScripts generated are converted to the pattern, lower case.

• Server calls clients

A sample of how the server calls the client is the method EnterRoom that have the responsible of to alert all users of application about a user new and to start the game with your opponent. Notice that have two kind of messages, a alert to all users and other alert to room users.

[sourcecode language=”csharp”]

public void EnterRoom(string roomName)

{

var room = _service.BindPlayerInRoom(Context.ConnectionId, Clients.Caller.PlayerName, roomName);

Groups.Add(this.Context.ConnectionId, roomName);

Clients.All.changeRoom(_service.GetListRooms());

if (room.IsFull())

Clients.Group(roomName).startGame(room.PlayerCurrent);

}

[/sourcecode]

You must perceive that for user to access the room is utilized the system service class (TicTacToeService) and as parameter is informed the connection id and user name through of instruction “Clients.Caller.PlayerName” (variable created in client and that travels between client and server). In the next instruction is created a group through of room name. This group was created to receive and sent messages only room users. The creation of a group in SignalR is very simple according to code above.

One of the last changes in EnterRoom method, it is to alert all users about the change of room. This is done through of instruction “Clients.All.changeRoom”. The changeRoom function is a listening function and that was created in start. We can write what we want instead of name “changeRoom”, this code is dynamic and accept any name and the unique rule is that this listening function must exist in client.

The property “Clients” of SignalR class is a property to communication with the client, this case we can to utilize “All” that means to talk with all users. In addition, we have “Group” that means to talk with users only of a specific group.

To see all this that was spoken I suggest do the download of project.

Guys, I finish the article here and hope that you have liked.

www.stephanybatista.com

Published inSignalRVisual Studio

Be First to Comment

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *