wscatでcurlみたいにWebSocketの動作確認をする - Safie Engineers' Blog!
この記事はSafie Engineers' Blog! Advent Calendar 1日目の記事です。 こんにちは。セーフィー株式会社でバックエンドエンジニアをしている河津です。 アドベントカレンダーついに始まりましたね。初日の記事なので少し緊張します。 今年も様々な領域の記事がたくさん公開されると思いますので、是非他の記事も楽しみにしてくださいませ。 さて今回は、WebSocketを用いているサーバ側のアプリケーションの動作確認にwscatというツールが便利だったよという話をします。 背景 wscatとは 動作確認してみる 最後に 背景 セーフィーにはカメラの映像を視聴することができるSafie Viewerというプロダクトがあります。(デモ画面はこちら。) このプロダクトの中で、映像のサムネイルを数秒おきに更新している箇所があり、更新の手法としてWebSocketでの通信を用いてい
WebSocket で通信できない環境では Blazor Server は動作しないのか? - Qiita
Blazor Server は WebSocket 通信が必須? Blazor Server は、サーバー側プロセスとブラウザ上の小さなランタイムとが常時接続してリアルタイムで双方向通信しながら動作します。その通信手段としては、通常は WebSocket が使われます。 しかし、サーバー側との通信の途中に WebSocket 未対応の Web プロクシサーバーが挟まっているなどのように、WebSocket でサーバー側と通信ができない環境の場合、Blazor Server は動作しないのでしょうか。 WebSocket で通信できなくても大丈夫です! 結論としては、大丈夫です、Blazor Server は WebSocket 通信ができない環境でもちゃんと動作します! Blazor Server の通信技術基盤としては、ASP.NET "SignalR" (シグナルアール) と呼ばれるラ
ReactでWebSocketを扱う - Qiita
とある案件でReactからWebSocketを扱う必要が出てきたので、その時調査したことをまとめます。 調査のつもりが、React 18で追加されたuseSyncExternalStoreを利用したオレオレ状態管理ライブラリ作りにいつのまにか脱線していたので、そのお話も添えて。 React、WebSocket共に目新しい技術ではないですが、誰かのためになれば幸いです。 1.はじめに お品書きは次の通りです。 1.はじめに 2.WebSocket? 3.Hello World - React x WebSocket の基本形 4.自動で再接続できるようにする 5.カスタムフック化 - useSyncExternalStoreを利用したオレオレライブラリ 6.Notifications API と組み合わせる 7.データフェッチライブラリと組み合わせる 8.おわりに 実装例は、React 18
結局WebSocketってなに？ - Qiita
背景 YouTube Live Streaming APIを用いたライブ配信機能を実装する時に、WebSocket通信（Socket.IOというライブラリを使いました）を用いて実装したのですが、実装中に、 「そもそもWebSocketとは？」 と何回も原点回帰を繰り返しては、頭の中がかなり混乱していたので、その経験を踏まえて、WebSocketについて簡潔にまとめようと思い記事にしました。 ズバリWebSocketとは？ 簡潔にいうと、Webアプリケーションを作成する際に使用される通信プロトコルです。 WebSocketを使用すると、WebブラウザとWebサーバー間で双方向通信を行う事ができ、ライブチャットやオンラインゲームなど、リアルタイム性の高いアプリケーションを作成することができます。 通信プロトコルってなんだっけ？ 通信プロトコルとは、通信を行うための規則や手順のことです。 通信す
Next.js と Go で WebSocket 通信を行おう【接続編】 - Qiita
はじめに Next.js と Go で WebSocket 通信を行おう【環境構築編】 Next.js と Go で WebSocket 通信を行おう【接続編】 <- 今回の記事 Next.js と Go を利用して WebSocket 通信を行なってみます。 環境構築は前回記事を参照してください。 今回は実際に WebSocket 接続を行い、ローカル環境で双方向通信を実現させます。 このように form にデータを入力し、サーバーサイドでデータを加工して受け取ることをゴールとします。 また、今回実装したコードは上記リポジトリに公開しています。 対象読者 WebSocket 通信を用いて双方向通信を行いたい人 WebSocket とは？ ウェブ上で双方向通信を行うためのプロトコルの一種です。 ウェブ上では通常 HTTP プロトコルを用いますが、それですと一回のやり取りで一つのレスポンスし
Next.js と Go で WebSocket 通信を行おう【環境構築編】 - Qiita
はじめに 今回は Next.js と Go を使った WebSocket 通信のやり方を2回に分けて紹介していきたいと思います。 Next.js と Go で WebSocket 通信を行おう【環境構築編】 <- 今回の記事 Next.js と Go で WebSocket 通信を行おう【接続編】 私は現在個人開発でWebSocketによる双方向通信を利用したサービスを開発しています。 Next.js で立てたサーバーと Go で立てたサーバーを WebSocket で接続する記事があまりなく、結構苦労したので備忘録代わりにまとめたいと思い、この記事を書きました。 まずは環境構築編です。第1回目のこの記事ではモノレポでサーバーを立ち上げて Next.jsの default 画面と Go のサーバーで Hello, World! が出力される所まで行いたいと思います。 今回のコードは git
#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可） - Qiita
#Scratch 3.0（公式）などで独自拡張機能を使わない外部との通信【概要編】（ブラウザの開発者ツールのコンソール、JavaScript、WebSocket が関連、 #toio でも利用可）JavaScriptNode.jswebsocketScratchtoio デフォルトでは外部と自由に通信をする機能がない 「公式版の Scratch（ https://scratch.mit.edu/ ）」 や、 「toio Do（ https://toio.github.io/toio-visual-programming/beta/?category=do ）」 を、以下のようにリアルタイム通信で連動させることができたりする仕組みの話を、この記事で取り扱います。詳細は続きの記事で書こうと思っていて、今回は概要を記事化してみます。 今回の仕組みに関係してくる主なキーワードは、以下のとおりです。
シンプルで高速なオープンソースのWebSocketサーバー・「Soketi」
Soketiはシンプルで高速なオープンソースのWebSocketサーバーです。TSで書かれておりAGPL-3.0ライセンスの元でソースコードが公開されています。 Fastifyの8.5倍、Socket.IOの10倍のレベルで実行可能なuWebSockets.jsをベースに構築されているそうです。 WebSocketといえばPusherですが、こちらと比較して安くて制限もなく利用する事が出来ます。また、Pusherと互換性もあるそうでコードを置き換える必要はないそうですので移行も難しくないでしょう。ドキュメントも充実していました。 Soketi
p5.js Web Editor で WebSocket を扱ってみる（wscat でローカル環境にサーバーを準備して試したり、OBS連携を実行） - Qiita
p5.js Web Editor で WebSocket を扱ってみる（wscat でローカル環境にサーバーを準備して試したり、OBS連携を実行）websocketp5.jsOBSobs-websocketp5.jsWebEditor 過去の記事では OBS の外部からの操作や、それを Slack と連携させてみたり、その他 MQTT とともに IoT系の話で使っている WebSocket。 ●「websocket user:youtoy」の検索結果 - Qiita https://qiita.com/search?q=websocket+user%3Ayoutoy この WebSocket を p5.js Web Editor 上で使って、何か面白い外部連携的なことができないかな、とふと思ったのがこの記事を書いたきっかけです。 それで、まずは WebSocket を利用するプログラムと、
OBS をスマホや M5GO（M5Stack）から遠隔制御 〜 MQTT や obs-websocket を利用 〜 - Qiita
はじめに この記事は、ライブ配信などで使われる OBS Studio（以下、OBS と記載） を遠隔制御してみたという内容です。 まずは、その仕組みを実際に動作させている様子をご覧ください。 MQTTを利用し、PC上で動くOBSのシーンの切り替え操作を、他デバイスから制御してみた！ UIFlowでプログラムを書いたM5GOと、JavaScriptで処理を書いたWebサイトを表示したスマホの、2つのデバイスを操作し、3つのシーンを切り替えてみました。 pic.twitter.com/fg3QAauCB6 — you (@youtoy) August 20, 2020 この動画の内容について補足すると、**PC上で OBS が動いており、その OBS では以下の 3つのシーンが設定されています。** 「休憩中」という文字を表示するシーン PC のカメラ映像を画面いっぱいに表示するシーン スライ
RFC 6455: The WebSocket Protocol
[RFC Home] [TEXT|PDF|HTML] [Tracker] [IPR] [Errata] [Info page] PROPOSED STANDARD Updated by: 7936, 8307, 8441 Errata ExistInternet Engineering Task Force (IETF) I. Fette Request for Comments: 6455 Google, Inc. Category: Standards Track A. Melnikov ISSN: 2070-1721 Isode Ltd. December 2011 The WebSocket Protocol Abstract The WebSocket Protocol enables two-way communication between a client running
AWSでRESTで送信したものをWebSocketでリアルタイムに受け取るサーバレスシステム - Qiita
はじめに オンラインイベントで応援ボタンなど押した時に、現地で一方向の情報として受信し、それをトリガーにエフェクトなど表示したいことがあります。 方法としてはSocket通信や、MQTTなどを利用したり、ngrokなどのローカル環境をネット上で受けれるようにするサービスを使うなどあります。 ただ、クライアントが数百人など多数の環境になるとソケットを大量に張る必要がある、サービスの上限制限や毎回URLが変わるなど運用が面倒なことなどが考えられます。 今回はそれらを回避しつつ、サーバレス環境でコストも少なくしたシステムを作ってみます。 全体構成 送信する方はRESTで送ることで接続数に依存せずコストを下げることが可能です。 特にいつ押されるかわからないため、無駄にSocketなどを張って時間課金のコストを増やすということをしないようにします。 受信側は送られたらPUSHで情報を受けたいのでここ
JavaとjavascriptでWebSocketを試してみよう！ - Qiita
Javaとjavascriptを使用します（jQuery使用） 1.Javaでサーバーサイドを記述します。 内容の説明はコード内のコメントを読んでいただくと、だいたい分かるかと思います。 package main.java; import java.io.IOException; import java.util.HashMap; import java.util.Map; import javax.websocket.CloseReason; import javax.websocket.EndpointConfig; import javax.websocket.OnClose; import javax.websocket.OnError; import javax.websocket.OnMessage; import javax.websocket.OnOpen; import
ソフトウェアエンジニアとして心がけていること｜Satoshi Nakagawa
SF ベイエリアで働く1人のソフトウェアエンジニアとして、楽しくエンジニアリングをやっていくために日頃からぼんやりと心がけている3つのポイントについて今回は書いてみたい。 インフラを作る側にいるソフトウェアエンジニアとして普通の Software Engineer から Senior Software Engineer、Staff Software Engineer とだんだん昇進していくにしたがって、より大きな成果を出すことを期待される。Staff レベルにはチームをまたいだ成果を出すことが求められる。そのためには多くの場所で使われるようなサービスやライブラリを作るのが一番成果としてわかりやすい。 会社とプロダクトが初期段階から成長していく過程で、最初は1つしかなかったエンジニアリングチームが大きくなるにしたがってインフラ側とプロダクト側に分割されていく。そのときにかならずインフラ側に属
API Gateway + WebSocket の基本的な使い方を調べてみた | DevelopersIO
クライアントとの通信時のフローは以下の通りです クライアントから API Gateway に接続時に $connect に設定されたLambdaが起動します メッセージ内のボディに含まれるキーをもとにルーティングされ、ルーティングに応じたLambdaが起動します クライアントから切断、もしくはタイムアウトによる切断が行われたときに $disconnectに設定された Lambdaが起動します Serverless Framework を使ってデプロイ 今回は Serverless Framework で python を使ってのデプロイする例をご紹介します ※ サンプルとしてコードはGithubにアップしております serverless.yml provider.websocketsApiRouteSelectionExpression にルート選択式を指定します provider: na
FlaskとReact使ったTwitter認証をWebSocket使ってめっちゃ強引に行う - Qiita
概要 reactにおける認証は下記のページなどで行っている人が複数人いる。 React Authentication with Twitter, Google, Facebook and Github ReactでSPAを作り、Twitter認証(OAuth)でログインする。バックエンドはRails ただ、自分は馬鹿なのでいまいちよくわからなかった(後、上記ページはサーバーサイドがexpressとかRailsでflaskは見つからなかった)。 そのため、小手先でめっちゃ強引な認証を書いた。 WebSocket使うのもReactのuseEffect使うのも、Flask使うのも初めてなので、参考程度にみてもらえると良い(後々、ちゃんとしたコードで書き直したい) 流れ 今回は「連携アプリ認証」のボタンを押すと連携が始まるようになっているので、そこの部分は適当に変えて欲しい。 認証を行うボタンをお
HTTPのバージョンについてまとめ - Qiita
HTTP0.9 そもそもHTTP/0.9というバージョンは存在しませんでした。HTTP/1.0より前という意味合いで、0.9と呼ばれるようになったみたいです。このバージョンで行えることは非常にシンプルで URLで特定されるHTMLを取得する ということだけです。 イメージとしては「ブラウザーからURLを叩いて、HTMLのドキュメントを取得し表示する」これだけです。双方向通信はもちろんのこと、情報の更新や、削除も行えません。 HTTP/1.0 HTTP/1.0ではMIMEのようにメタデータを追加したメッセージ形式を導入することで、プロトコルの改善を行っています。 HTTP/0.9からの変更点 送受信フォーマットにヘッダが追加された。 リクエスト、レスポンス時のバHTTPのバージョンが追加された。 リクエスト時にメソッド（GET、PUT、POST、DELETE等）が送信できるようになった。 レ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Small Tips to use Bun with WebSocket Server and WebAssembly Modules. / Bun と WebSocket Server とオマケのWebAssembly - Masashi GANEKO / がねこまさし
[React/Rails] WebSocket connection to 'ws://localhost:3000/ws' failed が発生してレスポンスが受け取れない - Qiita![[React/Rails] WebSocket connection to 'ws://localhost:3000/ws' failed が発生してレスポンスが受け取れない - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a6cefaaadc64d4ab982be556f12bf5a38a557104/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCUmVhY3QlMkZSYWlscyU1RCUyMFdlYlNvY2tldCUyMGNvbm5lY3Rpb24lMjB0byUyMCUyN3dzJTNBJTJGJTJGbG9jYWxob3N0JTNBMzAwMCUyRndzJTI3JTIwZmFpbGVkJTIwJUUzJTgxJThDJUU3JTk5JUJBJUU3JTk0JTlGJUUzJTgxJTk3JUUzJTgxJUE2JUUzJTgzJUFDJUUzJTgyJUI5JUUzJTgzJTlEJUUzJTgzJUIzJUUzJTgyJUI5JUUzJTgxJThDJUU1JThGJTk3JUUzJTgxJTkxJUU1JThGJTk2JUUzJTgyJThDJUUyJTgwJUE2JnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1iMGQ3MzE3ZDZlNWVlY2M5YTY2ZjNhZDdiYTliM2MwZA%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBLYW1lZ3J1ZW9uJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1mMjBiZjg0MzRjYmFkMDIzZWJmZWMxYzFkNmQ5YWFiZA%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3Da4a22a74d9b0da95dd1cf4ff2dc064ed)
JVNVU#94243578: Apache TomcatにおけるWebSocket接続の実装に関する問題