I resolved the trouble, All that I needed it was encode the messages to that the server had hability of notify other client messages, also I had to create a client list to get all connected clients and detect the real time notifications from the frontend.
The frontend ended to relegated except in the backend (server) interaction.
I pass the code finished.
Server
using System;
using System.Collections.Generic;
using System.Net;
using System.Net.Sockets;
using System.Text;
using System.Text.RegularExpressions;
using System.Threading;
using System.Linq;
namespace Consola
{
public class Program
{
private static List<Socket> clients = new List<Socket>();
private static TcpListener tcpListener = new TcpListener(
IPAddress.Parse("127.0.0.1"),
8080
);
public static void Main(string[] args)
{
tcpListener.Start();
while(true)
{
Socket client = tcpListener.AcceptSocket();
if (client.Connected)
{
clients.Add(client);
Thread nuevoHilo = new Thread(() => Listeners(client));
nuevoHilo.Start();
}
}
}
private static void Listeners(Socket client)
{
Console.WriteLine("Client:" + client.RemoteEndPoint + " now connected to server.");
NetworkStream stream = new NetworkStream(client);
while (true)
{
while (!stream.DataAvailable) ;
while (client.Available < 3) ;
byte[] bytes = new byte[client.Available];
stream.Read(bytes, 0, bytes.Length);
string s = Encoding.UTF8.GetString(bytes);
if (Regex.IsMatch(s, "^GET", RegexOptions.IgnoreCase))
{
Console.WriteLine("=====Handshaking from client=====\n{0}", s);
string swk = Regex.Match(s, "Sec-WebSocket-Key: (.*)").Groups[1].Value.Trim();
string swka = swk + "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
byte[] swkaSha1 = System.Security.Cryptography.SHA1.Create().ComputeHash(Encoding.UTF8.GetBytes(swka));
string swkaSha1Base64 = Convert.ToBase64String(swkaSha1);
byte[] response = Encoding.UTF8.GetBytes(
"HTTP/1.1 101 Switching Protocols\r\n" +
"Connection: Upgrade\r\n" +
"Upgrade: websocket\r\n" +
"Sec-WebSocket-Accept: " + swkaSha1Base64 + "\r\n\r\n");
stream.Write(response, 0, response.Length);
}
else
{
var text = DecodeMessage(bytes);
Console.WriteLine("{0}", text);
var otherClients = clients.Where(
c => c.RemoteEndPoint != client.RemoteEndPoint
).ToList();
if (otherClients.Count > 0)
{
foreach (var cli in otherClients)
{
var sendMessage = EncodeMessageToSend(text);
cli.Send(sendMessage);
}
}
Console.WriteLine();
}
}
}
private static string DecodeMessage(byte[] bytes)
{
var secondByte = bytes[1];
var dataLength = secondByte & 127;
var indexFirstMask = 2;
if (dataLength == 126)
indexFirstMask = 4;
else if (dataLength == 127)
indexFirstMask = 10;
var keys = bytes.Skip(indexFirstMask).Take(4);
var indexFirstDataByte = indexFirstMask + 4;
var decoded = new byte[bytes.Length - indexFirstDataByte];
for (int i = indexFirstDataByte, j = 0; i < bytes.Length; i++, j++)
{
decoded[j] = (byte)(bytes[i] ^ keys.ElementAt(j % 4));
}
return Encoding.UTF8.GetString(decoded, 0, decoded.Length);
}
private static byte[] EncodeMessageToSend(string message)
{
byte[] response;
byte[] bytesRaw = Encoding.UTF8.GetBytes(message);
byte[] frame = new byte[10];
var indexStartRawData = -1;
var length = bytesRaw.Length;
frame[0] = (byte)129;
if (length <= 125)
{
frame[1] = (byte)length;
indexStartRawData = 2;
}
else if (length >= 126 && length <= 65535)
{
frame[1] = (byte)126;
frame[2] = (byte)((length >> 8) & 255);
frame[3] = (byte)(length & 255);
indexStartRawData = 4;
}
else
{
frame[1] = (byte)127;
frame[2] = (byte)((length >> 56) & 255);
frame[3] = (byte)((length >> 48) & 255);
frame[4] = (byte)((length >> 40) & 255);
frame[5] = (byte)((length >> 32) & 255);
frame[6] = (byte)((length >> 24) & 255);
frame[7] = (byte)((length >> 16) & 255);
frame[8] = (byte)((length >> 8) & 255);
frame[9] = (byte)(length & 255);
indexStartRawData = 10;
}
response = new byte[indexStartRawData + length];
int i, reponseIdx = 0;
for (i = 0; i < indexStartRawData; i++)
{
response[reponseIdx] = frame[i];
reponseIdx++;
}
for (i = 0; i < length; i++)
{
response[reponseIdx] = bytesRaw[i];
reponseIdx++;
}
return response;
}
}
}
Client
<!DOCTYPE html>
<html lang="en">
<head>
<link href="Content/bootstrap.min.css" type="text/css" rel="stylesheet" />
<script src="Scripts/jquery-3.6.1.min.js" type="text/javascript"></script>
</head>
<body>
<div class="card">
<div class="card-header">
<h2>Prueba multi cliente con WebSocket</h2>
</div>
<div class="card-body">
<p>
<textarea cols="60" rows="6" id="cajadetexto"></textarea>
</p>
<p>
<button id="boton" class="btn btn-primary">Enviar</button>
</p>
<p>
<div id="salida"></div>
</p>
</div>
</div>
<style type="text/css">
textarea {
vertical-align: bottom;
}
#salida {
overflow: auto;
}
#salida > p {
overflow-wrap: break-word;
}
#salida span {
color: blue;
}
#salida span.error {
color: red;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
const wsUri = "ws://127.0.0.1:8080/";
const websocket = new WebSocket(wsUri);
$(document).on("click", "#boton", onClickButton);
websocket.onopen = (e) => {
writeToScreen("CONNECTED");
};
websocket.onclose = (e) => {
writeToScreen("DISCONNECTED");
};
websocket.onmessage = (e) => {
writeToScreen("<span>RESPONSE: " + e.data + "</span>");
};
websocket.onerror = (e) => {
writeToScreen(`ERROR: ${e.data}`);
};
function doSend(message) {
writeToScreen(`SENT: ${message}`);
websocket.send(message);
}
function writeToScreen(message) {
$("#salida").append("<p>" + message + "</p>");
}
function onClickButton() {
var text = $("#cajadetexto").val();
text && doSend(text);
$("#cajadetexto").val("");
$("#cajadetexto").focus();
}
});
</script>
</body>
</html>
Thanks for all the support. Greetings.