Create a Simple Chat Application Using Socket.IO in C#
A detailed guide on how to create a simple chat application using Socket.IO in C#, helping you understand real-time communication and build interactive applications.
This article will guide you through creating a simple chat application using C# and Socket.IO to establish a connection between the server and client. We will set up a simple server and a web client to send and receive messages.
C# Code
Server (C#)
using System;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.DependencyInjection;
using SocketIO.Server;
namespace ChatApp
{
public class Program
{
public static void Main(string[] args)
{
CreateHostBuilder(args).Build().Run();
}
public static IHostBuilder CreateHostBuilder(string[] args) =>
Host.CreateDefaultBuilder(args)
.ConfigureWebHostDefaults(webBuilder =>
{
webBuilder.UseStartup<Startup>();
});
}
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddSocketIOServer();
}
public void Configure(IApplicationBuilder app)
{
app.UseSocketIOServer();
app.Map("/", async context =>
{
context.Response.ContentType = "text/html";
await context.Response.WriteAsync("<h1>Welcome to Chat App</h1>");
});
}
}
}
Client (HTML + Socket.IO)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chat App</title>
<script src="https://cdn.socket.io/4.0.0/socket.io.min.js"></script>
</head>
<body>
<h1>Chat App</h1>
<input id="message" autocomplete="off" />
<button onclick="sendMessage()">Send</button>
<ul id="messages"></ul>
<script>
const socket = io();
socket.on('chat message', function(msg) {
const item = document.createElement('li');
item.textContent = msg;
document.getElementById('messages').appendChild(item);
});
function sendMessage() {
const messageInput = document.getElementById('message');
const message = messageInput.value;
socket.emit('chat message', message);
messageInput.value = '';
}
</script>
</body>
</html>
Detailed explanation:
-
Server (C#):
-
Programclass: Starts the ASP.NET Core application. -
Startupclass: Sets up services for Socket.IO and configures middleware. -
ConfigureServices: Registers the Socket.IO service. -
Configure: Sets up the root path for the application and sends a response when accessed.
-
-
Client (HTML + Socket.IO):
- Creates a simple interface for the chat application.
- Uses Socket.IO to connect to the server.
- Handles events for receiving messages and sending messages.
System Requirements:
- C# 5.0 or newer
- .NET Core 3.1 or newer
- Socket.IO library for .NET
How to install the libraries needed to run the C# code above:
- Create a new ASP.NET Core project.
- Install the Socket.IO library via NuGet:
dotnet add package SocketIoClientDotNet
Tips:
- Consider adding features such as user authentication and message history storage to enhance the application.
- Experiment with extended features like sound notifications or user presence alerts.