Communication Between WinForm Application And React JS Application Using SignalR

If you want to add any authorization, then create a custom AuthorizeAttribute handler (example: SignalRAuthorizeAttribute) for validating the bearer token and add it to HubPipeline in the Startup class. I didn't use any Authorization in my demo project.

using System;
using System.Collections.Generic;
using System.IdentityModel.Tokens.Jwt;
using System.Linq;
using System.Net.Http;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;

namespace SignalR_Hub.Authorization
{
	public class SignalRAuthorizeAttribute : AuthorizeAttribute
	{
		public override bool AuthorizeHubConnection(HubDescriptor hubDescriptor, IRequest request)
		{
			string token;
			var path = request.LocalPath;
			bool isTokenPresent = !string.IsNullOrEmpty(request.QueryString.Get("token"));

			if (isTokenPresent)
			{			
				//Validate the token			
				

				return true;
			}

			return false;
		}		
	}    
}

app.Map("/signalr", map =>
{
	var hubConfiguration = new HubConfiguration();
	hubConfiguration.EnableDetailedErrors = true;

	var authorizer = new SignalRAuthorizeAttribute();
	var module = new AuthorizeModule(authorizer, authorizer);
	GlobalHost.HubPipeline.AddModule(module);

	map.RunSignalR(hubConfiguration);
});

Add "SignalRAuthorize" to your "ChatHub' class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using System.Web;
using Microsoft.AspNet.SignalR;
using Microsoft.AspNet.SignalR.Hubs;
using SignalR_Hub.Authorization;

namespace SignalR_Hub
{
	[SignalRAuthorize]
	[HubName("chatHub")]
	public class ChatHub : Hub
	{
		
	}
}

Note the SignalR hub running URL from the Project properties. Here, my SignalR hub service is running in "http://localhost:57142/".

ReactJS Web Application

Create an empty react application. Please refer to the link to know about creating the reactjs application. Here, I am using JS and Hooks concepts in my reactjs application and used the VS Code editor for web application development.

Add "jquery-3.4.1.min.js" and "jquery.signalR-2.4.2.min.js". Download the js files from the below link,

• signalR
• jquery

Add reference of above two files in the index.html file using <script> tag.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />  
  <title>React App</title>
  <script src="./Scripts/jquery-3.4.1.min.js"></script>
  <script src="./Scripts/jquery.signalR-2.4.2.min.js"></script>  
</head>

<body>
  <div id="root"></div>
</body>

</html>

Modify the App.js file with the below code. There are 3 functions in the App.js file.

• Connect() - Connect the SignalR hub
• Send() - Send the message to the Winform Application
• messageChange() - Store the textbox value into the local state.

import './App.css';
import { useEffect, useState } from 'react';

function App() {

  const [chatHubProxy, SetChatHubProxy] = useState("");
  const [connection, SetConnection] = useState(null);
  const [chatMessage, SetChatMessage] = useState("");  
  const [chatHistory, SetChatHistory] = useState("");

  function Send() {
    chatHubProxy.invoke('SendToWinForm', "Web", chatMessage).done(function () {
      SetChatHistory(prevChat => prevChat !== "" ? (prevChat + "\nWeb :" + chatMessage) : ("\nWeb :" + chatMessage));
    }).fail(function (error) {
      console.log('Invocation failed. Error: ' + error);
    });
  }

  function Connect() {
    try {
      let localConnection = window.$.hubConnection("http://localhost:57142");
      localConnection.qs = { 'version': '1.0' };
      var hubProxy = localConnection.createHubProxy('chathub');

      hubProxy.on('SendMessageToWebApp', function (eventName, data) {
        SetChatHistory(prevChat => prevChat !== "" ? (prevChat + "\n" + eventName + ":" + data) : (eventName + ":" + data));
      });

      localConnection.start()
        .done(function () { alert("Connected Successfully"); console.log('Now connected, connection ID=' + localConnection.id); })
        .fail(function () { console.log('Could not connect'); });

      SetChatHubProxy(hubProxy);
      SetConnection(localConnection);
    } catch (error) {
      console.log(error);
    }
  }

  function messageChange(e) {
    SetChatMessage(e.target.value);
  }

  useEffect(() => {
    return (()=> {
      connection.close();
    })
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [])

  return (
    <div className="App">
      <div className="container">
        <button onClick={Connect}>Connect</button>
        <br />
        <br />
        <label>Message:</label>
        <br />
        <input type="text" id="message" onChange={messageChange} />
        <button className="btn-Send" onClick={Send}>Send</button>
        <br />
        <br />
        <label>Chat History:</label>
        <br />
        <textarea defaultValue={chatHistory} rows={10} cols={50}>
        </textarea>
        <br />
      </div>
    </div>
  );
}

export default App;

How to Run

• In the .NET solution, Go to Debug -> Set Startup Projects -> Common Properties -> Startup Project,
  • Select Multiple startup projects check box
  • Change Action to Start for both project

Run the .NET solution. The SignalR Hub and Winform chat application will run.

Run the React web application using the "npm run start" command.

Click the "Connect" button in a WinForm application to connect the SignalR Hub. Once connected to the SignalR hub, will get the "Connected Successfully" message box.

Click the "Connect" button in a Web application.

In the WinForm application, type a message in the text box and click send button. The Web application will receive the message. You can see this in the "Chat History" text box.

Same as above, you can send messages from react application also.

SignalR hub can be hosted in the below ways,

• Cloud
• On-premises network
• Localhost in the user machine
• Windows service in the user machine

In this article, I discussed How to making communication between legacy .NET applications with a modern ReactJS Web application using SignalR. Hope you liked it. If you have any doubts or comments about this, please let me know in the comments.