WebSocketで再接続したい　C#⇔Javascript

WebSocketで、Javascript(クライアント)とC#(サーバ)間で
通信するプログラムを作っています。

実現したいのは、サーバを起動させたまま常駐させておき、
webページからボタンクリックする度に接続→処理→通信切断を行う、というものです。

現状、ボタンクリックで1度のみ接続から切断までを行うことはできます。
そのまま再度ボタンをクリックすると、Javascriptの処理は走りますが、
接続されず無反応になってしまいます。
また、ブラウザを閉じてwebページを開きなおし
ボタンをクリックしても、同じく接続されず無反応です。

現状のコードを下記に記載いたしますので、
ご教授お願いいたします。

javascript
1<script type="text/javascript">
2
3  //ボタンクリックイベント
4  btn.addEventListener("click", function (e) {
5
6    //WebSocket接続
7    var connection = new WebSocket("ws://xxxx");
8
9    //接続開始
10    connection.onopen = function (event) {
11      document.getElementById("message").value = "接続完了";
12      var msg = {
13        item: document.getElementById("item").value,
14        cnt: document.getElementById("cnt").value
15      };
16      //送信
17      connection.send(JSON.stringify(msg));
18    };
19
20    //メッセージ受信
21    connection.onmessage = function (evt) {
22      document.getElementById("message").value = "受信 " + evt.data;
23      connection.close();
24    };
25  })
26
27</script>

C#
1using System;
2using System.Collections.Generic;
3using System.Linq;
4using System.Net;
5using System.Net.WebSockets;
6using System.Text;
7using System.Threading;
8using System.Threading.Tasks;
9using System.Runtime.Serialization.Json;
10using System.IO;
11
12namespace webSocketServer
13{
14    class Program
15    {
16        static void Main(string[] args)
17        {
18            Run();
19            Console.ReadKey();
20        }
21        static async Task Run()
22        {
23            HttpListener s = new HttpListener();
24            s.Prefixes.Add("http://xxxx/");
25            s.Start();
26            Console.WriteLine("サーバ起動");
27
28            var hc = await s.GetContextAsync();
29
30            //クライアントからのリクエストがWebSocketでない場合は処理を中断
31            if (!hc.Request.IsWebSocketRequest)
32            {
33                hc.Response.StatusCode = 400;
34                hc.Response.Close();
35                return;
36            }
37
38            //WebSocketでレスポンスを返却
39            var wsc = await hc.AcceptWebSocketAsync(null);
40            var ws = wsc.WebSocket;
41
42            var response = "";
43
44            /// WebSocketの送受信ループ
45            while (ws.State == WebSocketState.Open)
46            {
47                try
48                {
49                    var buff = new ArraySegment<byte>(new byte[1024]);
50
51                    /// 受信待機
52                    var ret = await ws.ReceiveAsync(buff, CancellationToken.None);
53
54                    Console.WriteLine("受信");
55
56                    /// テキスト
57                    if (ret.MessageType == WebSocketMessageType.Text)
58                    {
59                        response = Encoding.UTF8.GetString(buff.Take(ret.Count).ToArray());
60                        Console.WriteLine(response);
61
62                        var serializer = new DataContractJsonSerializer(typeof(ReceiveData));
63                        var ms = new MemoryStream(Encoding.UTF8.GetBytes(response));
64                        var JsRes = (ReceiveData)serializer.ReadObject(ms);
65                        ms.Close();
66
67                        response = JsRes.item;
68						
69						//～処理～
70
71                        //文字列をByte型に変換
72                        var buffer = Encoding.UTF8.GetBytes(response);
73                        var segment = new ArraySegment<byte>(buffer);
74
75                        //クライアント側に文字列を送信
76                        await ws.SendAsync(segment, WebSocketMessageType.Text, true, CancellationToken.None);
77                        Console.WriteLine(segment);
78                    }
79                    else if (ret.MessageType == WebSocketMessageType.Close) /// クローズ
80                    {
81                        Console.WriteLine("クローズ要求");
82                    }
83                }
84                catch
85                {
86                    /// 例外 クライアントが異常終了
87                    Console.WriteLine("異常終了");
88                }
89            }
90
91        }
92    }
93    public class ReceiveData
94    {
95        public string item { get; set; }
96        public int cnt { get; set; }
97    }
98}

###追記
下記のとおりC#のソースを修正し、何度も接続することは可能になりました。
しかし、WebSocketを起動したままで
一度webブラウザを閉じて再度開いて接続しようとしてもできません。
デバッグするとvar ret = await ws.ReceiveAsync(buff, CancellationToken.None);で
止まってしまっています。
何かお分かりになる方、お教授お願いいたします。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.WebSockets;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Runtime.Serialization.Json;
using System.IO;

namespace webSocketServer
{
    class Program
    {
        static void Main(string[] args)
        {
            Run();
            Console.ReadKey();
        }
        static async Task Run()
        {
            HttpListener s = new HttpListener();
            s.Prefixes.Add("http://xxxx/");
            s.Start();
            Console.WriteLine("サーバ起動");

            while (true)
            {
                var hc = await s.GetContextAsync();

                if (hc.Request.IsWebSocketRequest)
                {
                    ProcessRequest(hc);

                //クライアントからのリクエストがWebSocketでない場合は処理を中断
                }
                else {
                    hc.Response.StatusCode = 400;
                    hc.Response.Close();
                    return;
                }
            }
        }

        static async void ProcessRequest(HttpListenerContext hc)
        {
            //WebSocketでレスポンスを返却
            var wsc = await hc.AcceptWebSocketAsync(null);
            var ws = wsc.WebSocket;

            var response = "";

            /// WebSocketの送受信ループ
            while (ws.State == WebSocketState.Open)
            {
                try
                {
                    var buff = new ArraySegment<byte>(new byte[1024]);

                    /// 受信待機
                    var ret = await ws.ReceiveAsync(buff, CancellationToken.None);

                    Console.WriteLine("受信");

                    /// テキスト
                    if (ret.MessageType == WebSocketMessageType.Text)
                    {
                        response = Encoding.UTF8.GetString(buff.Take(ret.Count).ToArray());
                        Console.WriteLine(response);

                        var serializer = new DataContractJsonSerializer(typeof(ReceiveData));
                        var ms = new MemoryStream(Encoding.UTF8.GetBytes(response));
                        var JsRes = (ReceiveData)serializer.ReadObject(ms);
                        ms.Close();

                        response = JsRes.item;

                        //文字列をByte型に変換
                        var buffer = Encoding.UTF8.GetBytes(response);
                        var segment = new ArraySegment<byte>(buffer);

                        //クライアント側に文字列を送信
                        await ws.SendAsync(segment, WebSocketMessageType.Text, true, CancellationToken.None);
                        Console.WriteLine(segment);
                    }
                    else if (ret.MessageType == WebSocketMessageType.Close) /// クローズ
                    {
                        Console.WriteLine("クローズ要求");
                    }
                }
                catch
                {
                    /// 例外 クライアントが異常終了
                    Console.WriteLine("異常終了");
                    break;
                }
            }
        }
    }
    public class ReceiveData
    {
        public string item { get; set; }
        public int cnt { get; set; }
    }
}

BluOxy

2020/07/29 07:20 編集

クライアントから切断されたとき、サーバー側は既にRunメソッドから抜けていると思います。上記を確認するためには、Mainメソッドの Console.ReadKey(); にブレークポイントを入れてください。そして、1回目のコネクションが切れた後にそこで処理が止まることを確認してください。

tc_hiro

2020/07/29 07:26

追記ありがとうございます。早速ブレークポイントを入れて実行してみましたが、止まるのはまずサーバを実行した際に1度止まりその後は接続や切断を行っても止まりませんでした。

BluOxy

2020/07/29 07:35

確認方法を間違えました。Runメソッドは非同期で実行されているので、「サーバを実行した際に1度止まる」は正しいです。 1回目のコネクションが切れた後はwhile (ws.State == WebSocketState.Open){}から抜けているのではないでしょうか。それを確認してください。

tc_hiro

2020/08/03 00:52

こちらも確認ができました。ありがとうございます。

行動規範の内容に同意します

回答1件

ベストアンサー

ボタンクリックで1度のみ接続から切断までを行うことはできます。

切断した後にvar hc = await s.GetContextAsync();が呼ばれていないためです。

切断した後、サーバー側からvar hc = await s.GetContextAsync();を実行しクライアントからの接続を非同期で待機するようプログラムを修正する必要があります。

投稿2020/07/29 07:11

BluOxy

総合スコア2663

tc_hiro

2020/07/29 07:24

ご回答ありがとうございます。早速確認してみましたが、具体的にC#のどの部分に`hc = await s.GetContextAsync();`を記述すれば良いでしょうか。 whileを抜けた直後に記載してみると、「不要な代入」と言われてしまいました。

BluOxy

2020/07/29 07:43 編集

記述するか否かを考える前に処理の流れを見直す必要があります。 Runメソッドの処理の流れはtc_hiroさんの意図通りでしょうか。現状のコードではwhileを抜けたらRunメソッドが終了します。2回目のクライアントの接続を待つことはないですから、当然2回目のコネクションは発生しません。なので、var hc = await s.GetContextAsync(); の行から再度処理が実行されるようループしなければいけないのではないでしょうか。処理の流れを確認してください。

BluOxy

2020/07/29 07:49

実際にはうまいように作っていただきたいですが、Runメソッド内のvar hc = await s.GetContextAsync();の行から最後の行までをwhile(true){}で囲えば「再接続したい」という問題は解決されるかと思います。

tc_hiro

2020/08/03 00:51

別件に手を取られており返答が遅くなり申し訳ありません。おっしゃる通り、var hc = await s.GetContextAsync();　を含めてwhile(true){}で囲うことにより、何度も接続することが可能になりました。ありがとうございます。しかし、WebSocketサーバーは起動したままで、一度Webブラウザを閉じて開きなおして接続を試みると、受信はされますが、ReceiveAsync以降が進みません。何かお分かりになりますでしょうか。

tc_hiro

2020/08/03 01:19

いろいろ試しているうちに解決しました。リクエストがWebSocketではない場合の処理から「return」を除去すると、 webブラウザを再起動しても繰り返し接続することができました。ありがとうございました。

行動規範の内容に同意します