Connecting Over Network

DnDTracker is designed with SignalR and ajax integration in mind.

The following three sections (Receiving Client Events, Sending Events to Clients, and Setting up SignalR in a View) describe the implementation of SignalR's patterns. SignalR is a library that enables RPC communication for on-event handling.

The last two sections (Setting up POST and GET in a Controller and Using POST and GET in a View) describe ajax implementation for HTTP requests, a method of by-request communication.

Receiving Client Events

In order for the server to communicate with clients, you must define a Hub type and route a sub-directory of your application to that Hub. The following ExampleHub class has been provided as an example:

public class ExampleHub : Hub
{
    public void LogMessage(string json)
    {
        Log.Debug(json);
    }
}

The LogMessage() method is not meant to be executed directly. Instead, it is designed to be triggered by a client. These event methods will also always expect a stringified JSON object as a parameter.

In order for the client to reach this Hub, you must define a route to it. This can be done in Startup.Configure() under UseSignalR:

app.UseSignalR(routes =>
{
    routes.MapHub<GenericHub>("/Hub");
    routes.MapHub<ExampleHub>("/Example"); // <--
});

Now, the client can send an event named LogMessage to /Example, and the server will call the appropriate method.

Sending Events to Clients

Using the example from the section above, you can replace Log.Debug(message); with the following line to send an event with a JSON object back to the calling client:

Clients.Caller.SendAsync("ReceivedMessage", JsonConvert.SerializeObject(new
{
    response = "ok"
}));

Clients has a list of alternative properties you may use if you want to send an event to other groups of clients.

Setting up SignalR in a View

To-do

Setting up POST and GET in a Controller

In order for the client to send POST and GET requests, the server must have a Controller and method to route each request to. The following example adds two request methods to an ExampleController:

public class ExampleController : Controller
{
    [HttpPost]
    public IActionResult ExamplePost([FromBody] ExampleModel exampleModel)
    {
        // Do something with "exampleModel"...
        return Json(new { // You can also specify an instance of a model inside "Json(...)"
            response = "ok"
        });
    }

    [HttpGet]
    public IActionResult ExampleGet()
    {
        // Do something...
        return Json(new { // You can also specify an instance of a model inside "Json(...)"
            response = "ok"
        });
    }
}

Where ExampleModel is defined below:

public class ExampleModel
{
    public int ExampleInteger;
}

With this example, POST and GET requests through ajax, network.js, or the browser will be routed to these methods.

Using POST and GET in a View

POST and GET requests are handled through network.js, acting as a wrapper around JavaScript's ajax function.

The following example assumes that the example above has been implemented and will submit POST and GET requests to the server, route to the appropriate methods, and execute the specified callbacks with the returned data:

<script>
    var exampleModel = {
        ExampleInteger: 123
    };

    network.post('/Example/ExamplePost', exampleModel, json => {
        console.log(json.response);
    });
    network.get('/Example/ExampleGet', '', json => {
        console.log(json.response);
    });
</script>