Creating a Hello World WebSocket example

Question

I don t understand why I cannot make the following code work  I want to connect with JavaScript to my server console application  And then send data to the server   Here is the server code       static void Main string   args                            TcpListener server   new TcpListener IPAddress Parse  127 0 0 1    9998           server Start            var client   server AcceptTcpClient            var stream   client GetStream             while  true                        var buffer   new byte 1024                   wait for data to be received             var bytesRead   stream Read buffer  0  buffer Length                               var r   System Text Encoding UTF8 GetString buffer                  write received data to the console             Console WriteLine r Substring 0  bytesRead                      and here is the JavaScript           var ws   new WebSocket  ws   localhost 9998 service            ws onopen   function                  ws send  Hello World       I WANT TO SEND THIS MESSAGE TO THE SERVER                             ws onmessage   function  evt                var received msg   evt data              alert  Message is received                          ws onclose   function                     websocket is closed              alert  Connection is closed                    When I run that code this is what happens     Note that when I run the JavaScript the server accepts and successfully establishes a connection  JavaScript is not able to send data though  Whenever I place the send method it will not send even though a connection is established  How can I make this work

User · Accepted Answer

WebSockets is protocol that relies on TCP streamed connection. Although WebSockets is Message based protocol.

If you want to implement your own protocol then I recommend to use latest and stable specification (for 18/04/12) RFC 6455. This specification contains all necessary information regarding handshake and framing. As well most of description on scenarios of behaving from browser side as well as from server side. It is highly recommended to follow what recommendations tells regarding server side during implementing of your code.

In few words, I would describe working with WebSockets like this:

Create server Socket (System.Net.Sockets) bind it to specific port, and keep listening with asynchronous accepting of connections. Something like that:

Socket serverSocket = new Socket(AddressFamily.InterNetwork, SocketType.Stream, ProtocolType.IP);
serverSocket.Bind(new IPEndPoint(IPAddress.Any, 8080));
serverSocket.Listen(128);
serverSocket.BeginAccept(null, 0, OnAccept, null);

You should have accepting function "OnAccept" that will implement handshake. In future it has to be in another thread if system is meant to handle huge amount of connections per second.

private void OnAccept(IAsyncResult result) {
try {
    Socket client = null;
    if (serverSocket != null && serverSocket.IsBound) {
        client = serverSocket.EndAccept(result);
    }
    if (client != null) {
        /* Handshaking and managing ClientSocket */
    }
} catch(SocketException exception) {

} finally {
    if (serverSocket != null && serverSocket.IsBound) {
        serverSocket.BeginAccept(null, 0, OnAccept, null);
    }
}
}

After connection established, you have to do handshake. Based on specification 1.3 Opening Handshake, after connection established you will receive basic HTTP request with some information. Example:
```
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==
Origin: http://example.com
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
```
This example is based on version of protocol 13. Bear in mind that older versions have some differences but mostly latest versions are cross-compatible. Different browsers may send you some additional data. For example Browser and OS details, cache and others.

Based on provided handshake details, you have to generate answer lines, they are mostly same, but will contain Accpet-Key, that is based on provided Sec-WebSocket-Key. In specification 1.3 it is described clearly how to generate response key. Here is my function I've been using for V13:
```
static private string guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
private string AcceptKey(ref string key) {
    string longKey = key + guid;
    SHA1 sha1 = SHA1CryptoServiceProvider.Create();
    byte[] hashBytes = sha1.ComputeHash(System.Text.Encoding.ASCII.GetBytes(longKey));
    return Convert.ToBase64String(hashBytes);
}
```
Handshake answer looks like that:
```
HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=
```
But accept key have to be the generated one based on provided key from client and method AcceptKey I provided before. As well, make sure after last character of accept key you put two new lines "\r\n\r\n".
After handshake answer is sent from server, client should trigger "onopen" function, that means you can send messages after.
Messages are not sent in raw format, but they have Data Framing. And from client to server as well implement masking for data based on provided 4 bytes in message header. Although from server to client you don't need to apply masking over data. Read section 5. Data Framing in specification. Here is copy-paste from my own implementation. It is not ready-to-use code, and have to be modified, I am posting it just to give an idea and overall logic of read/write with WebSocket framing. Go to this link.
After framing is implemented, make sure that you receive data right way using sockets. For example to prevent that some messages get merged into one, because TCP is still stream based protocol. That means you have to read ONLY specific amount of bytes. Length of message is always based on header and provided data length details in header it self. So when you receiving data from Socket, first receive 2 bytes, get details from header based on Framing specification, then if mask provided another 4 bytes, and then length that might be 1, 4 or 8 bytes based on length of data. And after data it self. After you read it, apply demasking and your message data is ready to use.
You might want to use some Data Protocol, I recommend to use JSON due traffic economy and easy to use on client side in JavaScript. For server side you might want to check some of parsers. There is lots of them, google can be really helpful.

Implementing own WebSockets protocol definitely have some benefits and great experience you get as well as control over protocol it self. But you have to spend some time doing it, and make sure that implementation is highly reliable.

In same time you might have a look in ready to use solutions that google (again) have enough.

User · Answer

I couldnt find a simple working example anywhere  as of Jan 19   so here is an updated version  I have chrome version 71 0 3578 98   C  Websocket server     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  amp  amp  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  amp  amp  serverSocket IsBound                                serverSocket BeginAccept null  0  OnAccept  null                                      public static T   SubArray lt T gt  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  lt   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  gt  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  lt  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           lt summary gt          Enum for opcode types          lt  summary gt      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                 lt summary gt Gets an encoded websocket frame to send to a client from a string lt  summary gt           lt param name  Message  gt The message to encode into the frame lt  param gt           lt param name  Opcode  gt The opcode of the frame lt  param gt           lt returns gt Byte array in form of a websocket frame lt  returns gt      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  lt   125                        frame 1     byte length              indexStartRawData   2                    else if  length  gt   126  amp  amp  length  lt   65535                        frame 1     byte 126              frame 2     byte   length  gt  gt  8   amp  255               frame 3     byte  length  amp  255               indexStartRawData   4                    else                       frame 1     byte 127              frame 2     byte   length  gt  gt  56   amp  255               frame 3     byte   length  gt  gt  48   amp  255               frame 4     byte   length  gt  gt  40   amp  255               frame 5     byte   length  gt  gt  32   amp  255               frame 6     byte   length  gt  gt  24   amp  255               frame 7     byte   length  gt  gt  16   amp  255               frame 8     byte   length  gt  gt  8   amp  255               frame 9     byte  length  amp  255                indexStartRawData   10                     response   new byte indexStartRawData   length            int i  reponseIdx   0             Add the frame bytes to the reponse         for  i   0  i  lt  indexStartRawData  i                          response reponseIdx    frame i               reponseIdx                         Add the data bytes to the response         for  i   0  i  lt  length  i                          response reponseIdx    bytesRaw i               reponseIdx                       return response              Client html and javascript    x000D   x000D   lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN  x000D       http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt  x000D   lt html xmlns  http   www w3 org 1999 xhtml  gt  x000D   lt head gt  x000D       lt script type  text javascript  gt  x000D          var socket   new WebSocket  ws   localhost 8080 websession    x000D          socket onopen   function     x000D                alert  handshake successfully established  May send data now       x000D       socket send  Hi there from browser     x000D             x000D    socket onmessage   function  evt    x000D                    alert  About to receive data    x000D                  var received msg   evt data  x000D                  alert  Message received     received msg   x000D                 x000D          socket onclose   function     x000D              alert  connection closed    x000D             x000D       lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Posted answer on behalf of the OP    I am able to send data now  This is my new version of the program thanks to your answers and the code of  Maksims Mihejevs    Server  using System  using System Net Sockets  using System Net  using System Security Cryptography  using System Threading   namespace ConsoleApplication1       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 128               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  amp  amp  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                                      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                                                    which one should I use  none of them fires the onopen method                     client Send System Text Encoding UTF8 GetBytes response                         var i   client Receive buffer      wait for client to send a message                         once the message is received decode it in different formats                     Console WriteLine Convert ToBase64String buffer  Substring 0  i                                             Console WriteLine   n nPress enter to send data to client                        Console Read                         var subA   SubArray lt byte gt  buffer  0  i                       client Send subA                       Thread Sleep 10000    wait for message to be send                                               catch  SocketException exception                                throw exception                            finally                               if  serverSocket    null  amp  amp  serverSocket IsBound                                        serverSocket BeginAccept null  0  OnAccept  null                                                      public static T   SubArray lt T gt  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                        JavaScript    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN        http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt       lt script type  text javascript  gt          function connect                 var ws   new WebSocket  ws   localhost 8080 service                ws onopen   function                      alert  About to send data                    ws send  Hello World       I WANT TO SEND THIS MESSAGE TO THE SERVER                         alert  Message sent                                 ws onmessage   function  evt                    alert  About to receive data                    var received msg   evt data                  alert  Message received     received msg                              ws onclose   function                         websocket is closed                  alert  Connection is closed                                        lt  script gt   lt  head gt   lt body style  font-size xx-large   gt       lt div gt       lt a href     onclick  connect    gt Click here to start lt  a gt  lt  div gt   lt  body gt   lt  html gt    When I run that code I am able to send and receive data from both the client and the server  The only problem is that the messages are encrypted when they arrive to the server  Here are the steps of how the program runs     Note how the message from the client is encrypted

User · Answer

Issue  Since you are using WebSocket  spender is correct  After recieving the initial data from the WebSocket  you need to send the handshake message from the C  server before any further information can flow   HTTP 1 1 101 Web Socket Protocol Handshake Upgrade  websocket Connection  Upgrade WebSocket-Origin  example WebSocket-Location  something here WebSocket-Protocol  13   Something along those lines   You can do some more research into how WebSocket works on w3 or google   Links and Resources  Here is a protocol specifcation  http   tools ietf org html draft-hixie-thewebsocketprotocol-76 section-1 3  List of working examples    https   stackoverflow com a 5866975 184746 https   stackoverflow com a 2212752 184746 http   ashishware com websocksample shtml http   www sencha com forum showthread php 99842-WebSocket-server-in-C

User · Answer

WebSockets are implemented with a protocol that involves handshake between client and server  I don t imagine they work very much like normal sockets  Read up on the protocol  and get your application to talk it  Alternatively  use an existing WebSocket library  or  Net4 5beta which has a WebSocket API

[c#] Creating a "Hello World" WebSocket example

Examples related to c#

Examples related to javascript

Examples related to websocket