La création d'un “Hello World” WebSocket exemple

WebSockets est un protocole qui s'appuie sur TCP streaming connexion. Bien que les WebSockets Message est basée sur le protocole.

Si vous souhaitez mettre en place votre propre protocole, alors je vous recommande d'utiliser les dernières stable et cahier des charges (pour 18/04/12) RFC 6455.
Cette spécification contient toutes les informations nécessaires sur la poignée de main et le cadrage. Ainsi plus de description sur les scénarios de comportement de votre navigateur ainsi que du côté serveur.
Il est fortement recommandé de suivre les recommandations raconte relatives à côté serveur lors de la mise en œuvre de votre code.

En quelques mots, je dirais que le travail avec les WebSockets comme ceci:

1. Créer un serveur de Socket (Système d'.Net.Les Sockets) le lier à un port spécifique, et restez à l'écoute avec asynchrone d'accepter des connexions. Quelque chose comme ça:

   Socket serverSocket = new Socket(AddressFamily.Réseau D'Interconnexion, SocketType.Stream, ProtocolType.La propriété intellectuelle); 
   serverSocket.Bind(nouvelle l'ipendpoint(IPAddress.Tout, 8080)); 
   serverSocket.Écouter(128); 
   serverSocket.BeginAccept(null, 0, OnAccept, null);

2. Vous devriez avoir accepter fonction "OnAccept" qui permettra de mettre en œuvre poignée de main. Dans l'avenir, il doit être dans un autre thread si le système est conçu pour traiter la quantité énorme de connexions par seconde.

   private void OnAccept(IAsyncResult result) { 
   try { 
   Socket client = null; 
   si (serverSocket != null && serverSocket.IsBound) { 
   client = serverSocket.EndAccept(result); 
   } 
   si (client != null) { 
   /* Prise de contact et la gestion des ClientSocket */
   } 
   } catch(exception socketexception exception) { 
   
   } finally { 
   si (serverSocket != null && serverSocket.IsBound) { 
   serverSocket.BeginAccept(null, 0, OnAccept, null); 
   } 
   } 
   }

3. Une fois la connexion établie, vous avez à faire poignée de main. Basé sur les spécifications 1.3 Ouverture De La Poignée De Main, une fois la connexion établie, vous recevrez de base de la requête HTTP avec quelques informations. Exemple:

   OBTENIR /chat HTTP/1.1 
   Hôte: server.example.com 
   Mise à jour: websocket 
   Connexion: Mise À Niveau 
   Sec-WebSocket-Clés: dGhlIHNhbXBsZSBub25jZQ== 
   Origine: http://example.com 
   Sec-WebSocket-Protocole: chat, superchat 
   Sec-WebSocket-Version: 13

   Cet exemple est basé sur la version du protocole 13. Gardez à l'esprit que les anciennes versions ont quelques différences, mais surtout les versions les plus récentes sont de la croix-compatible. Les différents navigateurs peuvent vous envoyer des informations supplémentaires. Par exemple le Navigateur et l'OS de détails, le cache et les autres.

   Basé sur la poignée de main de détails, vous devez générer des lignes de réponse, ils sont pour la plupart même, mais contiendra Accpet-Clé, qui est basée sur la condition de la Sec-WebSocket-Clé. Dans la spécification 1.3 il est décrit clairement comment générer une réponse clé.
   Voici ma fonction que j'ai utilisé pour V13:

   statique de la chaîne privée guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11"; 
   private string AcceptKey(ref string key) { 
   chaîne de longKey = + clé guid; 
   SHA1 sha1 = SHA1CryptoServiceProvider.Create(); 
   byte[] hashBytes = sha1.ComputeHash(Système D'.Texte.L'encodage.ASCII.GetBytes(longKey)); 
   de retour de Convertir.ToBase64String(hashBytes); 
   } 
   

   Poignée de main de réponse ressemble à ça:

   HTTP/1.1 101 changement de Protocoles 
   Mise à jour: websocket 
   Connexion: Mise À Niveau 
   Sec-WebSocket-Accepter: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

   Mais accepter clés doivent être générées, l'un basé sur des clés du client et de la méthode AcceptKey j'ai fourni avant. Ainsi, assurez-vous après le dernier caractère de la touche accept vous mettez deux nouvelles lignes "\r\n\r\n".

4. Après la poignée de main de réponse est envoyé par le serveur, le client doit déclencher "onopen" de la fonction, cela signifie que vous pouvez envoyer des messages après.
5. Messages ne sont pas envoyés dans le format raw, mais ils ont Données de Cadrage. Et à partir du serveur vers le client ainsi mettre en œuvre de masquage pour les données basées sur des données 4 octets en-tête du message. Bien que depuis le serveur vers le client, vous n'avez pas besoin d'appliquer de masquage des données. Lire l'article 5. Données De Cadrage dans la spécification.
   Voici le copier-coller à partir de ma propre mise en œuvre. Il n'est pas prêt-à-utiliser le code, et à être modifié, que j'ai écris juste pour vous donner une idée, et de l'ensemble de la logique de lecture/écriture avec WebSocket cadrage. Aller à ce lien.
6. Après l'encadrement est mis en place, assurez-vous que vous recevez des données droit chemin à l'aide de sockets. Par exemple, pour éviter que certains messages sont fusionnés en un seul, parce que le protocole TCP est toujours basé sur les flux de protocole. Cela signifie que vous devez lire SEULEMENT la quantité spécifique d'octets. La longueur du message est toujours basé sur l'en-tête et données fournis par la longueur de détails dans l'en-tête de soi. Ainsi, lorsque vous la réception de données de Prise, d'abord de recevoir 2 octets, obtenir des informations à partir de l'en-tête basé sur l'Encadrement des spécifications, puis si le masque est un autre de 4 octets, et puis la longueur peut être de 1, 4 ou 8 octets en fonction de la longueur de données. Et d'après les données de l'individu. Après l'avoir lu, appliquer demasking et votre message de données est prêt à l'emploi.
7. Vous pouvez utiliser certains Protocole de Données, je recommande d'utiliser JSON en raison de la circulation de l'économie et facile à utiliser côté client en JavaScript. Pour le côté de serveur que vous pourriez vouloir vérifier certains des analyseurs. Il ya beaucoup d'entre eux, google peut être vraiment utile.

La mise en œuvre propre WebSockets protocole certainement avoir des avantages et une grande expérience, vous obtenez ainsi que le contrôle de protocole lui-même. Mais vous devez passer un peu de temps à le faire, et assurez-vous que la mise en œuvre est très fiable.

En même temps que vous pourriez avoir un coup d'oeil en prêt-à-utiliser des solutions de google (encore une fois) avoir assez.

Les WebSockets sont mis en œuvre avec un protocole qui implique poignée de main entre le client et le serveur. Je n'imagine pas qu'ils fonctionnent très bien comme d'habitude les sockets. Lire sur le protocole, et faites parvenir votre demande d'en parler. Vous pouvez également utiliser un existant WebSocket bibliothèque, ou .Net4.5beta qui a un API WebSocket.

Je ne pourrais pas trouver un simple exemple de travail n'importe où (à compter du 19 janvier), voici donc une version mise à jour. J'ai la version chrome 71.0.3578.98.

C# serveur Websocket :

using System;
using System.Text;
using System.Net;
using System.Net.Sockets;
using System.Security.Cryptography;
namespace WebSocketServer
{
class Program
{
static Socket serverSocket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.IP);
static private string guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
static void Main(string[] args)
{
serverSocket.Bind(new IPEndPoint(IPAddress.Any, 8080));
serverSocket.Listen(1); //just one socket
serverSocket.BeginAccept(null, 0, OnAccept, null);
Console.Read();
}
private static void OnAccept(IAsyncResult result)
{
byte[] buffer = new byte[1024];
try
{
Socket client = null;
string headerResponse = "";
if (serverSocket != null && serverSocket.IsBound)
{
client = serverSocket.EndAccept(result);
var i = client.Receive(buffer);
headerResponse = (System.Text.Encoding.UTF8.GetString(buffer)).Substring(0, i);
//write received data to the console
Console.WriteLine(headerResponse);
Console.WriteLine("=====================");
}
if (client != null)
{
/* Handshaking and managing ClientSocket */
var key = headerResponse.Replace("ey:", "`")
.Split('`')[1]                     //dGhlIHNhbXBsZSBub25jZQ== \r\n .......
.Replace("\r", "").Split('\n')[0]  //dGhlIHNhbXBsZSBub25jZQ==
.Trim();
//key should now equal dGhlIHNhbXBsZSBub25jZQ==
var test1 = AcceptKey(ref key);
var newLine = "\r\n";
var response = "HTTP/1.1 101 Switching Protocols" + newLine
+ "Upgrade: websocket" + newLine
+ "Connection: Upgrade" + newLine
+ "Sec-WebSocket-Accept: " + test1 + newLine + newLine
//+ "Sec-WebSocket-Protocol: chat, superchat" + newLine
//+ "Sec-WebSocket-Version: 13" + newLine
;
client.Send(System.Text.Encoding.UTF8.GetBytes(response));
var i = client.Receive(buffer); //wait for client to send a message
string browserSent = GetDecodedData(buffer, i);
Console.WriteLine("BrowserSent: " + browserSent);
Console.WriteLine("=====================");
//now send message to client
client.Send(GetFrameFromString("This is message from server to client."));
System.Threading.Thread.Sleep(10000);//wait for message to be sent
}
}
catch (SocketException exception)
{
throw exception;
}
finally
{
if (serverSocket != null && serverSocket.IsBound)
{
serverSocket.BeginAccept(null, 0, OnAccept, null);
}
}
}
public static T[] SubArray<T>(T[] data, int index, int length)
{
T[] result = new T[length];
Array.Copy(data, index, result, 0, length);
return result;
}
private static string AcceptKey(ref string key)
{
string longKey = key + guid;
byte[] hashBytes = ComputeHash(longKey);
return Convert.ToBase64String(hashBytes);
}
static SHA1 sha1 = SHA1CryptoServiceProvider.Create();
private static byte[] ComputeHash(string str)
{
return sha1.ComputeHash(System.Text.Encoding.ASCII.GetBytes(str));
}
//Needed to decode frame
public static string GetDecodedData(byte[] buffer, int length)
{
byte b = buffer[1];
int dataLength = 0;
int totalLength = 0;
int keyIndex = 0;
if (b - 128 <= 125)
{
dataLength = b - 128;
keyIndex = 2;
totalLength = dataLength + 6;
}
if (b - 128 == 126)
{
dataLength = BitConverter.ToInt16(new byte[] { buffer[3], buffer[2] }, 0);
keyIndex = 4;
totalLength = dataLength + 8;
}
if (b - 128 == 127)
{
dataLength = (int)BitConverter.ToInt64(new byte[] { buffer[9], buffer[8], buffer[7], buffer[6], buffer[5], buffer[4], buffer[3], buffer[2] }, 0);
keyIndex = 10;
totalLength = dataLength + 14;
}
if (totalLength > length)
throw new Exception("The buffer length is small than the data length");
byte[] key = new byte[] { buffer[keyIndex], buffer[keyIndex + 1], buffer[keyIndex + 2], buffer[keyIndex + 3] };
int dataIndex = keyIndex + 4;
int count = 0;
for (int i = dataIndex; i < totalLength; i++)
{
buffer[i] = (byte)(buffer[i] ^ key[count % 4]);
count++;
}
return Encoding.ASCII.GetString(buffer, dataIndex, dataLength);
}
//function to create  frames to send to client 
///<summary>
///Enum for opcode types
///</summary>
public enum EOpcodeType
{
/* Denotes a continuation code */
Fragment = 0,
/* Denotes a text code */
Text = 1,
/* Denotes a binary code */
Binary = 2,
/* Denotes a closed connection */
ClosedConnection = 8,
/* Denotes a ping*/
Ping = 9,
/* Denotes a pong */
Pong = 10
}
///<summary>Gets an encoded websocket frame to send to a client from a string</summary>
///<param name="Message">The message to encode into the frame</param>
///<param name="Opcode">The opcode of the frame</param>
///<returns>Byte array in form of a websocket frame</returns>
public static byte[] GetFrameFromString(string Message, EOpcodeType Opcode = EOpcodeType.Text)
{
byte[] response;
byte[] bytesRaw = Encoding.Default.GetBytes(Message);
byte[] frame = new byte[10];
int indexStartRawData = -1;
int length = bytesRaw.Length;
frame[0] = (byte)(128 + (int)Opcode);
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;
//Add the frame bytes to the reponse
for (i = 0; i < indexStartRawData; i++)
{
response[reponseIdx] = frame[i];
reponseIdx++;
}
//Add the data bytes to the response
for (i = 0; i < length; i++)
{
response[reponseIdx] = bytesRaw[i];
reponseIdx++;
}
return response;
}
}
}

Client html et javascript:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
var socket = new WebSocket('ws://localhost:8080/websession');
socket.onopen = function() {
//alert('handshake successfully established. May send data now...');
socket.send("Hi there from browser.");
};
socket.onmessage = function (evt) {
//alert("About to receive data");
var received_msg = evt.data;
alert("Message received = "+received_msg);
};
socket.onclose = function() {
alert('connection closed');
};
</script>
</head>
<body>
</body>
</html>