質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

Q&A

1回答

899閲覧

Web上でデータ受け渡しをしてリアルタイムで閲覧できるようにしたい。

kuyokun

総合スコア0

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

ASP.NET

ASP.NETは動的なWebサイトやWebアプリケーション、そしてWebサービスを構築出来るようにする為、Microsoftによって開発されたウェブアプリケーション開発フレームワークです。

0グッド

1クリップ

投稿2023/06/08 01:54

編集2023/06/08 03:31

実現したいこと

図形(たくさんの点)が動くシミュレーションをウェブサイト上で閲覧できるようにしたいです。

サーバー側では、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は少しだけ)のみなのでできればバックエンドはこのどちらかの言語で実装したいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AbeTakashi

2023/06/08 02:15 編集

>思い通りに動いてくれないです この辺を具体的に書かないとおそらく回答が出てこないと思います。どういう風に動くことを想定していて、現状はどのような不具合が出ているのか? 必要であればキャプチャ画像や図なども交えるといいかと思います。また、ブラウザのコンソールに何かエラーログが出ていないでしょうか? ログが出てるならそのログもあるとより回答が出やすくなるかと思います。質問文を編集・追記することをオススメします。
kuyokun

2023/06/08 02:56

情報不足でした。申し訳ありません。 Consoleのエラーログには (index):12 Uncaught TypeError: columnData.join is not a function at socket.onmessage ((index):12:35) 12の数字が1秒ごとに増えていきます。 またスクリーンショットはありませんが、 最初にLoadingだけ表示され、そこから何も変わらないです。
FiroProchainezo

2023/06/08 03:00

質問文のコードは、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さんも指摘されていますが、思った事を書いてくれないと何をしたくて動かないのか分かりません。 また、「動かない」の説明もしないと何をもって動かないと言っているのか回答者は理解できず、回答できません。
AbeTakashi

2023/06/08 03:13

すでに回答がでていますが、エラーログの内容や現状についてなどはここに書かずに「質問文に追記」してください。ここは読まない人がいますので、せっかく答えられる人が来てくれても気づかずに回答してくれない可能性があります。
退会済みユーザー

退会済みユーザー

2023/06/08 03:15

ASP.NET のタグをつけてください。C# は関係あるのでタグはそのままにしておいてください。
退会済みユーザー

退会済みユーザー

2023/06/09 04:15

質問者さん、無言になってしまいましたが、回答の 2 つ目の .NET Framework 版のサンプルで話がしたいのか、回答の最後の(回答のコメント欄にも再掲).NET 6.0 のサンプルで話がしたいのか答えてください。 つまり、コメント欄での質問「サーバー側から操作してクライアントにデータを送るといったようなことを実装」については、どっちのサンプルをベースに話をすればいいのかを聞いてます。
退会済みユーザー

退会済みユーザー

2023/06/11 23:56

質問者さん、また無言になってしまいましたが、追加の質問に回答したので、それに対するフィードバックを返してください。
退会済みユーザー

退会済みユーザー

2023/06/15 04:52

質問者さん、いつまでもこのスレッドを放置しておかないでください。ギブアップしたならそれでもいいのでその旨書いてクローズしてください。
guest

回答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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kuyokun

2023/06/08 03:51

SignalRを一度試したのことがあるのですが参考文献の量的に.Net 3.0の方が.Net7.0より扱いやすいと感じたのですが、そこにあるメリットデメリットなどは何があるのでしょうか?技量不足で調べてもあまり出てこなかったので、教えていただけると幸いです。
退会済みユーザー

退会済みユーザー

2023/06/08 04:26

> .Net 3.0の方が.Net7.0より扱いやすいと感じたのですが、 「.Net 3.0」って何ですか? .NET Core 3.0 のこと? .NET Framework 3.0 のこと?
kuyokun

2023/06/08 04:46

.NET Core 3.0のことです。すみません。
退会済みユーザー

退会済みユーザー

2023/06/08 05:35 編集

> .NET Core 3.0のことです。 ならば .NET Core 3.0 と .NET 6.0 / 7.0 とは、少なくとも実装の難易度に関しては、メリット/デメリットを語るほどの差はないです。 .NET Framework 4.8 と比べると結構差はありますが。難易度は .NET 6.0 より .NET Framework 4.8 の方が低いと思います。
kuyokun

2023/06/08 06:23

結局 .NET Core 6.0 を用いて、今コードを書き始めました。 サイトではJavaScriptでボタンを押して、サーバー側にデータを送りそれを処理してまたそれをクライアント側に送信するといった仕組みを解説していたと思います。 教えていただいたサイト二つには載っていなかったので、お聞きしたいのですがサーバー側が自発的にデータをクライアント側に送信するのはどうすればよいでしょうか?
退会済みユーザー

退会済みユーザー

2023/06/08 06:29

> 教えていただいたサイト二つには載っていなかったので、お聞きしたいのですがサーバー側が自発的にデータをクライアント側に送信するのはどうすればよいでしょうか? .NET 6.0 での例は、回答の一番最後にリンクを張ったサンプルにありますので見てください。
退会済みユーザー

退会済みユーザー

2023/06/08 11:59

上に、 > .NET 6.0 での例は、回答の一番最後 と書きましたけど。上のレスを読んでないのかな。
退会済みユーザー

退会済みユーザー

2023/06/09 01:25 編集

.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 のサンプルで話がしたいのでは?
kuyokun

2023/06/09 05:03

>質問者さん、無言になってしまいましたが、回答の 2 つ目の .NET Framework 版のサンプルで話がしたいのか、回答の最後の(回答のコメント欄にも再掲).NET 6.0 のサンプルで話がしたいのか答えてください。 試行錯誤していて返信遅れました。.NET 6.0についてで合っています。
退会済みユーザー

退会済みユーザー

2023/06/09 06:48

> .NET 6.0についてで合っています。 では、 ASP.NET Core SignalR http://surferonwww.info/BlogEngine/post/2021/12/29/aspnet-core-signalr.aspx において「サーバー側から操作してクライアントにデータを送る」ところはどのようにしているのかを、後で回答欄に追記しておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問