これは何 HTTPとWebSocketサーバーのコア部分を実装しながら仕組みを理解していきます。学習目的で実用ではありません。 HTTP、WebSocketはどちらもWEBエンジニアなら当たり前に使うプロトコルですが、仕組みはふわっとしか分かっていませんでした。そんな折サーバー周りを触る必要が出てきたので改めて理解しておきたくなり、せっかくなので自分でいちから実装してみることにしました。コード全体は以下から見れます。 実装する機能 ざっくりと以下のような機能を作っています。 HTTPサーバー GETメソッドのみ、HTTP/1.1のみに対応 リクエストラインをパースして、リクエストに応じた処理を行う（GETのみ対応なのでレスポンスヘッダーを付けてファイルを返すだけ） ヘッダーフィールドもパースするが、Websocket関連以外のフィールドは無視する WebSocketサーバー Websock
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? これは CAMPFIRE Advent Calendar 2024 の 13日目の記事です。 他の方がCAMPFIREに関連したことを書く中、去年に引き続き、あまりCAMPFIREとは関係なく記事を書きます（去年は量子コンピューティングでした）。去年よりはWeb技術なのでCAMPFIRE寄りの内容です。 さて、みなさんはWebのリアルタイム通信、双方向通信といえば、何を思い浮かべるでしょうか？ おそらく、WebSocketが一番多いのではないでしょうか。ちなみに私もそうです。 それ以外にもW3Cで標準化済みやドラフトの技術として、Ser
本記事は Rust Advent Calendar 2023 16 日目の記事です。 AWS Lambda からストリームレスポンスを受け取りたい AWS Lambda 上で動く Rust アプリケーション上で OpenAI の API を叩いていたのですが、こちらのブログ の方と同じようにレスポンスをヌルヌル表示したくなりました。 そこで、今回以下 2 つの Lambda からストリームレスポンスを受け取る方法を試してみました。 Amazon API Gateway + AWS Lambda による WebSocket AWS Lambda のレスポンスストリーミング 1 つ目に関しては、上記のブログ で紹介されているとおり、OpenAI からの出力をヌルヌル表示できそうです。 2 つ目に関しても、こちらのブログで紹介されており、Lambda 単体でもヌルヌル表示できそうです。 自分は
目次 目次 はじめに リアルタイム化の必要性 解決策の検討 予約状況の更新に必要な速度を検討 実装案のブレスト 採用するアーキテクチャの決定 実装の詳細 リリース戦略 リリースによる効果 まとめ 最後に おまけ（メディア掲載の紹介） はじめに こんにちは！ 食べログ開発本部 ウェブ開発1部 FEチームの佐々木です。 私たちが開発している食べログノートは、レストラン向けのオンライン予約台帳です。ネット予約、電話予約、ウォークインの管理、顧客管理、卓管理などを一元的に行えるツールです。 その中でも特に重要な機能がタイムスケジュール画面です。この画面は、食べログノートの中でも最もよく使われる機能です。登録された卓と予約時間を表示し、ドラッグアンドドロップで卓や時間の変更が簡単に行えます。 今回の記事では、このタイムスケジュール画面において、WebSocketを使用せずに（ほぼ）リアルタイム更新を
この記事はSafie Engineers' Blog! Advent Calendar 1日目の記事です。 こんにちは。セーフィー株式会社でバックエンドエンジニアをしている河津です。 アドベントカレンダーついに始まりましたね。初日の記事なので少し緊張します。 今年も様々な領域の記事がたくさん公開されると思いますので、是非他の記事も楽しみにしてくださいませ。 さて今回は、WebSocketを用いているサーバ側のアプリケーションの動作確認にwscatというツールが便利だったよという話をします。 背景 wscatとは 動作確認してみる 最後に 背景 セーフィーにはカメラの映像を視聴することができるSafie Viewerというプロダクトがあります。(デモ画面はこちら。) このプロダクトの中で、映像のサムネイルを数秒おきに更新している箇所があり、更新の手法としてWebSocketでの通信を用いてい
Blazor Server は WebSocket 通信が必須? Blazor Server は、サーバー側プロセスとブラウザ上の小さなランタイムとが常時接続してリアルタイムで双方向通信しながら動作します。その通信手段としては、通常は WebSocket が使われます。 しかし、サーバー側との通信の途中に WebSocket 未対応の Web プロクシサーバーが挟まっているなどのように、WebSocket でサーバー側と通信ができない環境の場合、Blazor Server は動作しないのでしょうか。 WebSocket で通信できなくても大丈夫です! 結論としては、大丈夫です、Blazor Server は WebSocket 通信ができない環境でもちゃんと動作します! Blazor Server の通信技術基盤としては、ASP.NET "SignalR" (シグナルアール) と呼ばれるラ
とある案件で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
背景 YouTube Live Streaming APIを用いたライブ配信機能を実装する時に、WebSocket通信（Socket.IOというライブラリを使いました）を用いて実装したのですが、実装中に、 「そもそもWebSocketとは？」 と何回も原点回帰を繰り返しては、頭の中がかなり混乱していたので、その経験を踏まえて、WebSocketについて簡潔にまとめようと思い記事にしました。 ズバリWebSocketとは？ 簡潔にいうと、Webアプリケーションを作成する際に使用される通信プロトコルです。 WebSocketを使用すると、WebブラウザとWebサーバー間で双方向通信を行う事ができ、ライブチャットやオンラインゲームなど、リアルタイム性の高いアプリケーションを作成することができます。 通信プロトコルってなんだっけ？ 通信プロトコルとは、通信を行うための規則や手順のことです。 通信す
はじめに Next.js と Go で WebSocket 通信を行おう【環境構築編】 Next.js と Go で WebSocket 通信を行おう【接続編】 <- 今回の記事 Next.js と Go を利用して WebSocket 通信を行なってみます。 環境構築は前回記事を参照してください。 今回は実際に WebSocket 接続を行い、ローカル環境で双方向通信を実現させます。 このように form にデータを入力し、サーバーサイドでデータを加工して受け取ることをゴールとします。 また、今回実装したコードは上記リポジトリに公開しています。 対象読者 WebSocket 通信を用いて双方向通信を行いたい人 WebSocket とは？ ウェブ上で双方向通信を行うためのプロトコルの一種です。 ウェブ上では通常 HTTP プロトコルを用いますが、それですと一回のやり取りで一つのレスポンスし
はじめに 今回は 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 でも利用可）JavaScriptNode.jswebsocketScratchtoio デフォルトでは外部と自由に通信をする機能がない 「公式版の Scratch（ https://scratch.mit.edu/ ）」 や、 「toio Do（ https://toio.github.io/toio-visual-programming/beta/?category=do ）」 を、以下のようにリアルタイム通信で連動させることができたりする仕組みの話を、この記事で取り扱います。詳細は続きの記事で書こうと思っていて、今回は概要を記事化してみます。 今回の仕組みに関係してくる主なキーワードは、以下のとおりです。
Soketiはシンプルで高速なオープンソースのWebSocketサーバーです。TSで書かれておりAGPL-3.0ライセンスの元でソースコードが公開されています。 Fastifyの8.5倍、Socket.IOの10倍のレベルで実行可能なuWebSockets.jsをベースに構築されているそうです。 WebSocketといえばPusherですが、こちらと比較して安くて制限もなく利用する事が出来ます。また、Pusherと互換性もあるそうでコードを置き換える必要はないそうですので移行も難しくないでしょう。ドキュメントも充実していました。 Soketi
過去の記事では OBS の外部からの操作や、それを Slack と連携させてみたり、その他 MQTT とともに IoT系の話で使っている WebSocket。 ●「websocket user:youtoy」の検索結果 - Qiita https://qiita.com/search?q=websocket+user%3Ayoutoy この WebSocket を p5.js Web Editor 上で使って、何か面白い外部連携的なことができないかな、とふと思ったのがこの記事を書いたきっかけです。 それで、まずは WebSocket を利用するプログラムと、お手軽に試せそうな外部連携を試してみます。 （wscat を使った動作確認と、OBS のシーン切り替えをやってみます） WebSocket について リアルタイム通信でおなじみの WebSocket。 Web系の情報を調べるのにいつもお
プログラムの具体的な内容は、以下のとおりです。 プログラム中に 【 】 で囲まれた部分が複数ありますが、ご自身の環境に合わせて書きかえをしてください。 書きかえが必要な部分のリスト obs-websocket のポート番号 obs-websocket のパスワード（※ 認証を有効にした場合に利用する） shiftr の ID shiftr の PASS MQTTクライアントのクライアントID MQTT のトピック MQTT でやりとりする文字列（※ 今回は 3つのシーンを用意したため、3種類） const OBSWebSocket = require('obs-websocket-js'); const mqtt = require('mqtt'); const obs = new OBSWebSocket(); obs.connect({ // obs-websocket に関わる設定
[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
はじめに オンラインイベントで応援ボタンなど押した時に、現地で一方向の情報として受信し、それをトリガーにエフェクトなど表示したいことがあります。 方法としてはSocket通信や、MQTTなどを利用したり、ngrokなどのローカル環境をネット上で受けれるようにするサービスを使うなどあります。 ただ、クライアントが数百人など多数の環境になるとソケットを大量に張る必要がある、サービスの上限制限や毎回URLが変わるなど運用が面倒なことなどが考えられます。 今回はそれらを回避しつつ、サーバレス環境でコストも少なくしたシステムを作ってみます。 全体構成 送信する方はRESTで送ることで接続数に依存せずコストを下げることが可能です。 特にいつ押されるかわからないため、無駄にSocketなどを張って時間課金のコストを増やすということをしないようにします。 受信側は送られたらPUSHで情報を受けたいのでここ
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 javax.websocket.Session; import javax.websocket.server.ServerEndpoint; //これをつけるとWebSocketServe
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
![[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%2Fsiteproxy.ruqli.workers.dev%3A443%2Fhttps%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)
