Q&A
>思い通りに動いてくれないです
この辺を具体的に書かないとおそらく回答が出てこないと思います。どういう風に動くことを想定していて、現状はどのような不具合が出ているのか？ 必要であればキャプチャ画像や図なども交えるといいかと思います。また、ブラウザのコンソールに何かエラーログが出ていないでしょうか？ ログが出てるならそのログもあるとより回答が出やすくなるかと思います。質問文を編集・追記することをオススメします。
実現したいこと
図形（たくさんの点）が動くシミュレーションをウェブサイト上で閲覧できるようにしたいです。
サーバー側では、1秒ごとのすべての点の座標が含まれるCSVファイルを読み込み、クライアントに毎秒データを送信します。そして、クライアント側でデータを表示します。
また、リアルタイムな反映を実現するために、サーバー側で操作を行い、接続中のクライアントに適切なタイミングで応答を返したいと考えています。
教えていただきたいこと
Web系はほぼ初めてですので、まずこの実現は厳しいものなのか、また使用するべきライブラリはなんなのかを教えていただきたいです。
試したこと
主にPythonでtornadaとflask sokcketIOを試したのですが、思い通りに動いてくれないです。
追記
Consoleのエラーログには
(index):12 Uncaught TypeError: columnData.join is not a function
at socket.onmessage ((index):12:35)
12の数字が1秒ごとに増えていきます。
最初にLoadingだけ表示され、そこから何も変わらないです。
一番マシに動いてくれたtornadaのコードを記載しておきます。
正直、tornadaで実現可能なのかもわからない状態です。
該当のソースコード
python
1import tornado.ioloop 2import tornado.web 3import tornado.websocket 4import tornado.gen 5import csv 6 7def readcsv(): 8 csv_file_path = "data.csv" 9 10 data = [] 11 with open(csv_file_path, "r", encoding='utf-8') as file: 12 reader = csv.reader(file) 13 data = list(reader) 14 15 return [[row[i] for row in data if len(row) > i] for i in range(1, len(data[0]))] 16 17class MainHandler(tornado.web.RequestHandler): 18 def get(self): 19 self.render("index.html") 20 21class WebSocketHandler(tornado.websocket.WebSocketHandler): 22 def open(self): 23 self.data = readcsv() 24 self.index = 0 25 self.callback = tornado.ioloop.PeriodicCallback(self.send_data, 1000) 26 self.callback.start() 27 28 def send_data(self): 29 if self.index < len(self.data): 30 column_data = self.data[self.index] 31 self.write_message(str(column_data)) 32 self.index += 1 33 34 def on_close(self): 35 if self.callback: 36 self.callback.stop() 37 38application = tornado.web.Application([ 39 (r"/", MainHandler), 40 (r"/websocket", WebSocketHandler), 41]) 42 43if __name__ == "__main__": 44 application.listen(8888) 45 tornado.ioloop.IOLoop.current().start()
html
1<!DOCTYPE html> 2<html> 3<head> 4 <title>CSV Data</title> 5</head> 6<body> 7 <h1 id="data">Loading...</h1> 8 9 <script> 10 var socket = new WebSocket("ws://localhost:8888/websocket"); 11 socket.onmessage = function(event) { 12 var columnData = JSON.parse(event.data); 13 var columnDataString = columnData.join(", "); 14 document.getElementById("data").textContent = columnDataString; 15 }; 16 </script> 17</body> 18</html>
補足情報（FW/ツールのバージョンなど）
私自身、できる言語がPythonとC#(JSは少しだけ)のみなのでできればバックエンドはこのどちらかの言語で実装したいです。
情報不足でした。申し訳ありません。
Consoleのエラーログには
(index):12 Uncaught TypeError: columnData.join is not a function
at socket.onmessage ((index):12:35)
12の数字が1秒ごとに増えていきます。
またスクリーンショットはありませんが、
最初にLoadingだけ表示され、そこから何も変わらないです。
質問文のコードは、tornado(Python)のようです。
Flaskは関係ないのでタグから削除ください。(C#とかも関係ないですね)
> また、リアルタイムな反映を実現するために、サーバー側で操作を行い、接続中のクライアントに適切なタイミングで応答を返したいと考えています。
通常のHTTPの場合、必ずrequest-responseの関係になり、サーバ側からアクションを行うことができません。
そのため、Webで、サーバ側からアクションを行いたいと言う場合、WebSocketやWebRTC/WebTransportあたりが選択肢になると思います。
WebSocketの場合、Flask-Websocketの様な物を使えば実装できます。
> 私自身、できる言語がPythonとC#(JSは少しだけ)のみなのでできればバックエンドはこのどちらかの言語で実装したいです。
しかしながら、こちらが問題です。
Webを作る場合、サーバ側とクライアント側、どちらも実装が必要です。
requestし、responseを受け取るような、従来の形のものを作る場合は、クライアント側はHTMLだけを書けば動作しますが、動きを付ける場合、クライアント側にJSによる実装が必須になります。
つまり、JSが必要です。
「C#でWebをBlazorを使って作れば、クライアント側のコードをC#で書く事ができる」「BlazorのWebページはWebSocketで自動的に延々と通信されている」というような話も見つかりますので、C#で全て書きたいという場合にはこちらを調べて見ても良いかもしれません。
> 思い通りに動いてくれないです。
「プログラムは思った通りに動かない、書いた通りに動く」という意見があります。
AbeTakashiさんも指摘されていますが、思った事を書いてくれないと何をしたくて動かないのか分かりません。
また、「動かない」の説明もしないと何をもって動かないと言っているのか回答者は理解できず、回答できません。
すでに回答がでていますが、エラーログの内容や現状についてなどはここに書かずに「質問文に追記」してください。ここは読まない人がいますので、せっかく答えられる人が来てくれても気づかずに回答してくれない可能性があります。
ASP.NET のタグをつけてください。C# は関係あるのでタグはそのままにしておいてください。
質問者さん、無言になってしまいましたが、回答の 2 つ目の .NET Framework 版のサンプルで話がしたいのか、回答の最後の（回答のコメント欄にも再掲）.NET 6.0 のサンプルで話がしたいのか答えてください。
つまり、コメント欄での質問「サーバー側から操作してクライアントにデータを送るといったようなことを実装」については、どっちのサンプルをベースに話をすればいいのかを聞いてます。
質問者さん、また無言になってしまいましたが、追加の質問に回答したので、それに対するフィードバックを返してください。
質問者さん、いつまでもこのスレッドを放置しておかないでください。ギブアップしたならそれでもいいのでその旨書いてクローズしてください。
回答1件
0
リアルタイムな反映を実現するために、サーバー側で操作を行い、接続中のクライアントに適切なタイミングで応答を返したいと考えています。
普通の Web アプリの場合は、クライアントの要求に対して Web サーバーが応答を返すというのが基本なので、上記のような Web サーバ側から一方的にクライアントにデータを渡すということはできません。
ASP.NET SignalR を利用すると、同時に接続されているすべてのクライアントにメッセージをブロードキャストすることができます。それを考えてはいかがですか？
詳しくは、.NET Framework の場合は以下の記事を見てください。
SignalR 入門
https://learn.microsoft.com/ja-jp/aspnet/signalr/overview/getting-started/introduction-to-signalr
質問者さんのやりたいことに近そうなチュートリアルもあります。
チュートリアル: SignalR 2 を使用したサーバー ブロードキャスト
https://learn.microsoft.com/ja-jp/aspnet/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr
.NET 6.0 / 7.0 の場合は以下の記事を見てください。
ASP.NET Core の概要SignalR
https://learn.microsoft.com/ja-jp/aspnet/core/signalr/introduction?view=aspnetcore-6.0
ASP.NET Core SignalR
http://surferonwww.info/BlogEngine/post/2021/12/29/aspnet-core-signalr.aspx
【追記】
上に紹介した記事、
ASP.NET Core SignalR
http://surferonwww.info/BlogEngine/post/2021/12/29/aspnet-core-signalr.aspx
において「サーバー側から操作してクライアントにデータを送る」ところはどのようにしているのかを追記します。
上の記事の「(5) クライアントスクリプト」のセクションの「サーバーからのリモートプロシージャコール」のところを見てください。
以下のメソッドがありますが、これを呼び出すと情報をクライアントへ送信します。具体的には引数の Stock クラスの C# のオブジェクトを JSON にシリアライズしてクライアントに送信します。
C#
1private void BroadcastStockPrice(Stock stock) 2{ 3 _hubContext.Clients.All 4 .SendAsync("UpdateStockPrice", stock); 5}
クライアントでは以下の JavaScript のメソッドが定義されています。上の BroadcastStockPrice メソッドの中の SendAsync メソッドの第 1 引数と、下の HubConnection.on メソッドの第 1 引数が同じであることに注目してください。
javascript
1connection.on("UpdateStockPrice", function (stock) { 2 var displayStock = formatStock(stock); 3 var $row = $(rowTemplate.supplant(displayStock)); 4 $stockTableBody.find('tr[data-symbol=' + stock.symbol + ']') 5 .replaceWith($row); 6});
この設定により、サーバー側で BroadcastStockPrice 呼び出されると、クライアント側で HubConnection.on メソッドの第 2 引数に設定されている function が起動され、引数の stock にサーバー側から送られてきた JSON 文字列が JavaScript オブジェクト（連想配列）にデシリアライズされて渡されます。
そして、function に含まれるコードで、引数 stock に受け取った JavaScript オブジェクトの内容で html 要素を書き換えます。結果、ブラウザ上の表示が最新情報で書き換えられます。
サーバー側の BroadcastStockPrice メソッドは StockTicker.cs の StockTicker クラスで Timer を使って定期的に呼び出されるようになっています。具体的には、サンプルコードでは、250ms 毎に株価に変動があったかどうかをチェックし、変動があった場合は BroadcastStockPrice を呼び出して接続されているクライアントに情報をブロードキャストしています。
投稿2023/06/08 03:01
編集2023/06/09 07:39退会済みユーザー
総合スコア0
SignalRを一度試したのことがあるのですが参考文献の量的に.Net 3.0の方が.Net7.0より扱いやすいと感じたのですが、そこにあるメリットデメリットなどは何があるのでしょうか？技量不足で調べてもあまり出てこなかったので、教えていただけると幸いです。
> .Net 3.0の方が.Net7.0より扱いやすいと感じたのですが、
「.Net 3.0」って何ですか？ .NET Core 3.0 のこと？ .NET Framework 3.0 のこと？
.NET Core 3.0のことです。すみません。
> .NET Core 3.0のことです。
ならば .NET Core 3.0 と .NET 6.0 / 7.0 とは、少なくとも実装の難易度に関しては、メリット/デメリットを語るほどの差はないです。
.NET Framework 4.8 と比べると結構差はありますが。難易度は .NET 6.0 より .NET Framework 4.8 の方が低いと思います。
結局 .NET Core 6.0 を用いて、今コードを書き始めました。
サイトではJavaScriptでボタンを押して、サーバー側にデータを送りそれを処理してまたそれをクライアント側に送信するといった仕組みを解説していたと思います。
教えていただいたサイト二つには載っていなかったので、お聞きしたいのですがサーバー側が自発的にデータをクライアント側に送信するのはどうすればよいでしょうか？
> 教えていただいたサイト二つには載っていなかったので、お聞きしたいのですがサーバー側が自発的にデータをクライアント側に送信するのはどうすればよいでしょうか？
.NET 6.0 での例は、回答の一番最後にリンクを張ったサンプルにありますので見てください。
最後のリンクのサイトに記載されていた
https://learn.microsoft.com/ja-jp/aspnet/signalr/overview/getting-started/tutorial-server-broadcast-with-signalr
でいう定期的な更新の部分でしょうか？
サーバー側から操作してクライアントにデータを送るといったようなことを実装したいのですが、それは可能なのでしょうか？何度も申し訳ないです。
上に、
> .NET 6.0 での例は、回答の一番最後
と書きましたけど。上のレスを読んでないのかな。
.NET 6.0 での例、再掲しておきます。
ASP.NET Core SignalR
http://surferonwww.info/BlogEngine/post/2021/12/29/aspnet-core-signalr.aspx
> 結局 .NET Core 6.0 を用いて、今コードを書き始めました。
とのことなので、回答の 2 つ目の .NET Framework 版のサンプルではなくて、回答の最後の（即ち上に再掲した）.NET 6.0 のサンプルで話がしたいのでは？
>質問者さん、無言になってしまいましたが、回答の 2 つ目の .NET Framework 版のサンプルで話がしたいのか、回答の最後の（回答のコメント欄にも再掲）.NET 6.0 のサンプルで話がしたいのか答えてください。
試行錯誤していて返信遅れました。.NET 6.0についてで合っています。
> .NET 6.0についてで合っています。
では、
ASP.NET Core SignalR
http://surferonwww.info/BlogEngine/post/2021/12/29/aspnet-core-signalr.aspx
において「サーバー側から操作してクライアントにデータを送る」ところはどのようにしているのかを、後で回答欄に追記しておきます。
あなたの回答
tips
プレビュー
