创建一个“Hello World” WebSocket示例

Question

创建一个“Hello World” WebSocket示例

100

我不明白为什么下面的代码无法运行。我想通过JavaScript连接到我的服务器控制台应用程序，然后将数据发送到服务器。

这是服务器端的代码：

    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));
        }
    }

这里是 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...");
        };

当我运行那段代码时，会发生以下情况：

请注意，当我运行 JavaScript 时，服务器接受并成功建立连接。但 JavaScript 无法发送数据。每当我使用 send 方法时，尽管已建立连接，它也不会发送。如何使其工作？

- Tono Nam

10

这个“问题”似乎不再是一个问题，因此不适合放在StackOverflow的格式中。值得一提的是，客户端的消息并没有被加密，而是通过与随机值XOR运算（混淆）来掩码，这个随机值作为帧的一部分被传输。该协议细节的存在是为了防止代理服务器误解流量而进行的毒化攻击。 - EricLaw

2

谢谢，这个答案非常有帮助 :) 嘿，只有一个问题，这个“static private string guid = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";”是不是总是不变的？如果不是，我在哪里可以获取这些值？ - Charmie

2

我得到了这个：“服务器不能掩盖它发送到客户端的任何帧”。 - Charmie

2

为什么WebSocket的URL以“/service”结尾（ws://localhost:8080/service）？为什么不只是“ws://localhost:8080”？ - andree

无论是IE还是FF都对我不起作用。 - Thomas Weller

显示剩余3条评论

5个回答

17

（代表发帖人发布答案）

现在我能够发送数据了。这是我的新程序版本，感谢你们的回答和 @Maksims Mihejevs 的代码。

服务器

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 && 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<byte>(buffer, 0, i);
                    client.Send(subA);
                    Thread.Sleep(10000);//wait for message to be send


                }
            }
            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));
        }
    }
}

JavaScript：

<!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">
        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...");
            };
        };


    </script>
</head>
<body style="font-size:xx-large" >
    <div>
    <a href="#" onclick="connect()">Click here to start</a></div>
</body>
</html>

当我运行该代码时，我能够从客户端和服务器发送和接收数据。唯一的问题是当消息到达服务器时它们是加密的。以下是程序运行的步骤：

enter image description here

请注意客户端的消息是加密的。

- halfer

至少我在Chrome上遇到了一个关于掩码的问题，我不得不考虑这个：https://stackoverflow.com/questions/16932662/websockets-disconnects-on-server-message 然后它就可以工作了，谢谢。 - Chris

就目前而言，这个程序似乎无法正常工作，因为连接总是在客户端正确接收数据之前关闭。 - Steve Smith

16

截至2019年1月19日，我无法在任何地方找到一个简单可行的示例，因此这里提供了更新版本。我的Chrome版本为71.0.3578.98。

C# 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];

        long indexStartRawData = -1;
        long length = (long)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];

        long 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;
    }
}
}

客户端 HTML 和 JavaScript：

<!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>

- Deepak Garud

1

在GetFrameFromString中，您应该使用long而不是int来表示原始数据的长度。否则，对于大于65535的消息进行位移可能会导致与实际长度不同的值。由于int可以达到2,147,483,647，而long可以达到9,223,372,036,854,775,807，这是RFC6455帧限制。 - funie200

这在Chrome中可以工作，但使用FF时会因为负消息长度而出错，即使使用了@funie200的修复方法也是如此。 - Steve Smith

我在第一次调用Accept事件时遇到了以下错误：System.ArgumentException HResult=0x80070057 Message=Value does not fall within the expected range. (Parameter 'asyncResult') Source=System.Net.Sockets - Ali Humayun

6

WebSockets采用一种协议实现,其中涉及客户端和服务器之间的握手。我不认为它们像普通套接字那样工作。阅读有关协议的信息，并使您的应用程序进行交流。或者，使用现有的WebSocket库或.Net4.5beta，其具有WebSocket API。

- spender

1

当然，它们的工作方式非常类似于普通套接字。套接字位于应用程序协议之下，因此不依赖于它。这意味着您可以在套接字上运行FTP、SMTP、HTTP、WebSockets等协议。实现者需要确保正确遵循协议，否则任何人都无法与服务器通信。 - SRM

3

问题

由于您正在使用WebSocket，spender是正确的。在从WebSocket接收初始数据后，您需要在任何进一步信息流动之前从C#服务器发送握手消息。

HTTP/1.1 101 Web Socket Protocol Handshake
Upgrade: websocket
Connection: Upgrade
WebSocket-Origin: example
WebSocket-Location: something.here
WebSocket-Protocol: 13

大致如此。

您可以在w3或谷歌上了解WebSocket的工作方式。

链接和资源

这是一个协议规范：https://datatracker.ietf.org/doc/html/draft-hixie-thewebsocketprotocol-76#section-1.3

可用示例列表：

- caesay

我也正在使用UTF8编码。我应该使用不同的编码，比如ASCII吗？ - Tono Nam

据我所知，UTF8编码是正确的——虽然我不是HTML5专家，所以我不能确定。 - caesay

我已经让它在Safari上运行了！！！但我需要让它在Google Chrome上运行。所有的示例都可以连接，但没有一个成功发送数据。我会继续尝试。非常感谢您的帮助！ - Tono Nam

当然，如果我仍然无法让它工作，我会将这个问题变成一个悬赏问题！我真的很想看到它工作。感谢您的帮助。 - Tono Nam

你的协议规范链接已经过时。 Safari仍在使用此链接，但其他浏览器已经转向不兼容的RFC 6455。此外，虽然您正确地指出了初始连接需要一些协商，但进一步的消息则不需要。 - simonc

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- moka · Accepted Answer

WebSockets是一种基于TCP流连接的协议，虽然WebSockets是基于消息的协议。

如果您想要实现自己的协议，我建议使用最新和稳定的规范（18/04/12）RFC 6455。该规范包含了关于握手和分帧的所有必要信息。同时也包括了大多数浏览器端和服务器端行为方案的描述。在实现代码时，强烈建议遵循规范对服务器端的建议。

简单来说，我会这样描述与WebSockets的工作：

1. 创建服务器套接字（System.Net.Sockets），将其绑定到特定端口，并使用异步接受连接来保持监听。类似于以下代码：

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);

2. 你应该有一个名为"OnAccept"的接受函数，它将实现握手。如果系统需要处理大量连接每秒，未来必须在另一个线程中运行。

3. 连接建立后，您必须进行握手。根据1.3 Opening Handshake规范，在连接建立后，您将收到带有一些信息的基本HTTP请求。例如：

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

这个例子基于13版协议。请记住，旧版本有一些差异，但大多数最新版本是相互兼容的。不同的浏览器可能会向您发送一些额外的数据。例如浏览器和操作系统详细信息、缓存等。

根据提供的握手细节，您需要生成答案行，它们大多是相同的，但将包含Accept-Key，该键基于提供的Sec-WebSocket-Key生成。在规范1.3中，清楚地说明了如何生成响应密钥。以下是我用于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);
}

握手答案看起来像这样：

HTTP/1.1 101 切换协议升级: websocket 连接: 升级 Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

但是接受密钥必须基于客户端提供的密钥生成，并使用我之前提供的AcceptKey方法。同时，请确保在接受密钥的最后一个字符之后放置两个新行“\r\n\r\n”。

4. 服务器发送握手响应后，客户端应该触发“onopen”函数，这意味着你可以在此后发送消息。

5. 消息不是以原始格式发送的，而是有数据帧。从客户端到服务器也要根据消息头提供的4个字节对数据进行掩码处理。尽管从服务器到客户端，您不需要对数据进行掩码处理。请阅读规范中的5.数据帧部分。这是我自己实现的复制粘贴。它不是可直接使用的代码，必须进行修改，我发布它只是为了给出WebSocket帧的读写整体逻辑。请转到此链接。

6. 实现帧后，请确保使用套接字正确接收数据。例如，防止一些消息合并成一个，因为TCP仍然是基于流的协议。这意味着您必须仅读取特定数量的字节。消息的长度始终基于标题和标题本身提供的数据长度详细信息。因此，当您从Socket接收数据时，首先接收2个字节，根据Framing规范从标题中获取详细信息，然后如果提供掩码，则另外4个字节，然后是可能是1、4或8个字节的数据长度。然后是数据本身。读取完毕后，应用去掩码处理，您的消息数据就可以使用了。

7. 您可能想使用一些数据协议，我建议使用JSON，因为它在流量经济性和在JavaScript中易于使用。对于服务器端，您可能需要检查一些解析器。有很多，谷歌可能会非常有帮助。

实现自己的WebSockets协议确实有一些好处和很棒的体验，以及对协议本身的控制。但你必须花费一些时间来完成它，并确保实现非常可靠。

同时，您可以查看谷歌（再次）提供的现成解决方案。