WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
For modern real-time web applications, the ability to send events from the server to the client is indispensable. This necessity has led to the development of several methods over the years, each with its own set of advantages and drawbacks. Initially, long-polling was the only option available. It was then succeeded by WebSockets, which offered a more robust solution for bidirectional communicati
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
HTMXとは https://htmx.org/ HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogle
WebRTC と React を組み合わせるなら Flux 設計が有効
この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
WebSocket を使ってみたくて簡単なチャットアプリを作って Google Cloud Run にデプロイしてみる | stin's Blog
WebSocket を使ってみたくて簡単なチャットアプリを作って Google Cloud Run にデプロイしてみる2022/06/12 13:41 reactwebsocketfastifydockercloudrun WebSocket でリアルタイム通信したいんじゃWebSocket 通信を使ってみたいので調べた学習ノート。Node.js 用ライブラリの ws を使わずに WebSocket サーバー実装とかできたらかっこいいけどとりあえずライブラリに甘えます。 ws による最小構成 import { WebSocket, WebSocketServer } from "ws"; const wss = new WebSocketServer({ port: 7777 }); wss.on("connection", (ws: WebSocket) => { console.log
今さら聞けないWebSocket~WebSocketとは~ - Qiita
Webにおいて双方向通信を低コストで行うための仕組み。プロトコルの一種。 WebSocketの必要性 Web通信といえば HTTP。 主にHTMLで書かれた文書を転送するためのプロトコル。 HTTPの規格が制定された当時のWebは、遠隔地にいる人同士が知識を共有するためにあった。 Webの用途は変わってきた SNS等の登場によって、リアルタイムなやりとりが求められるようになった。 だれかのアクションがリアルタイムで他のユーザーに伝わり、ほかのユーザーもリアクションすることができる。 このリアルタイムなやり取りを実現するには、サーバ上の情報の更新が行われたらクライアントの画面等を更新する必要などがある。 これをHTTPで実現しようとすると難しい。 HTTPのボトルネック 1つのコネクションで1つのリクエストしか送ることができない リクエストはクライアントからしか送ることができない サーバーか
Vercel PostgresがどうやってEdge RuntimeでORMとコネクションプールを使えるようにしているのか
TLTR 実行時にNeon serverless driver(@neondatabase/serverlessモジュール)がnode-postgres(pgモジュール)内のSocketクラスをWebSocket実装に置き換える WebSocket接続を受けたneon.techサーバーがTCP接続に変換してPgBouncerに接続し応答する Neon serverless driverの解説記事が以下にあります。 Edge RuntimeでNode.jsのSocket APIがサポートされていない問題 Node.jsのORMライブラリはPostgreSQLへの接続にnode-postgresからSocket APIを呼び出しますが、Edge Runtimeは互換性の問題からそのままでは動作しません。 これに対して、各マネージドDBのプロバイダーは専用ライブラリを提供してHTTP経由でDBに
WebSocketの次の技術！？WebTransportについての解説とチュートリアル - Qiita
概要 こんにちは。NTTコミュニケーションズのyuki uchidaです。普段はSkyWayというWebRTCプラットフォームの開発やWebRTCリサーチャー(見習い)をしています。 この記事は NTTコミュニケーションズ Advent Calendar 2020 の3日目の記事です。 昨日はMasaki Shimuraさんの記事、 「Threat Intelligenceの活用を促進するMISPの紹介」でした。 この記事は、WebSocketの次の技術ではないかと噂される、WebTransportの概要や双方向通信の歴史をまとめつつ、WebTransportのdatagram形式でデータを送信してみるチュートリアル記事です。 対象読者 WebTransportっていう技術を初めて聞いた人 WebSocketを使ったことがあり、不満がある人 双方向通信・リアルタイム通信について興味がある人
golang.org/x/net/websocketの使い方とkuiperbelt - Qiita
import ( "io" "golang.org/x/net/websocket" ) func EchoHandler(ws *websocket.Conn) { io.Copy(ws, ws) } *websocket.Connはio.ReadWriteCloserが実装されており、クライアントから来たWebSocketのメッセージは*websocket.Conn.Readで読むことができ、また*websocket.Conn.Writeで送ることができます。なので、io.Copyで逐次読みだして同じ内容をまた書き込むことで簡単にecho serverを書くことができます。 これをサーバに組み込むのも簡単です。 import ( "net/http" ) func main() { http.Handle("/echo", websocket.Handler(EchoHandler))
大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]
WebSocketの扱うサービスでは、長時間のコネクション、再接続処理、プロキシ、ロードバランサなど、インフラの面で多くの問題を抱えがちです。弊社のサービス「pixiv」の9周年企画でも、この問題に直面しました。 実際にそこで構築したインフラの事例をもとに、本運用に使えるWebSocketサーバの構成について、pixivインフラ部の南川からご紹介します。 * 9周年企画 “黒歴史”をロケットで宇宙に飛ばす pixiv黒歴史 そもそも WebSocket とは？ WebSocketはTCP上で動く双方向通信のための通信規格です。 Webページの読み込みで行われているような、クライアントがサーバにデータを要求し、サーバはクライアントにレスポンスを返すというHTTPの通信ルールとは違います。サーバと長時間コネクションを確立し、Socketのようにデータのやり取りを行います。そして、コネクションを
![大量接続に耐えるWebSocketアプリケーションサーバ構築のコツ - pixiv inside [archive]](https://cdn-ak-scissors.b.st-hatena.com/image/square/95f08ea3414673bb0131022fbc9dc354bb7483ba/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fd%2Fdevpixiv%2F20161129%2F20161129204837.png)
WebSocket大合戦：Clojure、C++、Elixir、Go、NodeJS、Ruby | POSTD
Webアプリにリアルタイムの双方向通信が必要な場合、WebSocketを選ぶのは自然なことだと思います。では、どのツールでWebSocketサーバを構築すべきでしょうか。パフォーマンスは重要ですが、開発のプロセスも見過ごしてはなりません。パフォーマンスを基準にするだけでなく、開発のしやすさも考慮に入れるべきでしょう。今回の大合戦では、Clojure、C++、Elixir、Go、NodeJS、Rubyのそれぞれの言語によって慣用的な手法で実装されたシンプルなWebSocketサーバを比較したいと思います。 テスト内容 サーバに実装するのは、 echo と broadcast の2つのメッセージのみを扱う非常に単純なプロトコルです。echoは送信クライアントに返され、ブロードキャストは全ての接続クライアントに送信されます。そしてブロードキャストが完了すると、結果メッセージが送信者に返されます。
Socket.IO P2P | Socket.IO
Today were very happy to introduce Socket.IO P2P, the easiest way to establish a bidirectional events channel between two peers with a server fallback to provide maximum reliability. Lets look at the API and build a little chat application. Or check out the repository directly! Socket.IO P2P provides an easy and reliable way to setup a WebRTC connection between peers and communicate using the sock
LEAP Motion とブラウザを WebSocket で接続する - latest log
既に LEAP Motion を手に入れている人にはお馴染みかと思いますが、 JavaScript だけで、LEAP Motion を使いブラウザを操作することが可能です。 実際にChrome拡張で実装してみました (ε・◇・)з o O ( 未来キタ
node/WebSocket/MongoDBを使ったリアルタイム掲示板·TorToi MOONGIFT
TorToiはnode製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 昔からのWebコミュニケーションと言えば掲示板やチャットではないでしょうか。ノスタルジックな雰囲気がありますが、最新の技術を組み合わせることで一気にこれまでと違った様相を呈することがあります。今回はnode、MongoDBを使ったリアルタイム掲示板TorToiを紹介します。 この一つ一つのウィンドウがスレッドになると思われます。 答えるをクリックするとテキストエリアが開きます。なぜか半分…。 五分五分でエビフライぶつけるぞとちょ、のコメントがデフォルトで入ります。時々英語版エビフライになるとのことです。 ウィンドウは動かせます。 ロゴをクリックして新しいスレッドを立てることができます。 TorToiはまだ開発中という雰囲気がありますが、スレッドを単なる一覧ではなく、画面中のXY軸
『WebSocketで監視もリアルタイムに』
こんばんは。社内ニートの佐野と申します。所属はいちおAmebaのインフラチームです。Twitterもやっていますがフォローする価値はないです。つぶやいているのはメシと酒の話と下ネタだけです。 最近、組織改編とかもろもろありましてこのたびは雑用からニートになりました:(;ﾞﾟ'ωﾟ'): あまり目立たないように生きてたんですが、何気にこのブログへの登場は3回目になります...。前回は2012年12月に「QCon San Francisco 2012の参加レポ」を書かせていただきました。その前は2012年5月に「Virident FlashMAXの検証」として名前だけ登場しました。なんか、ニートだけど会社に貢献してる気がしてきた(^ρ^) そんなわけで以前WebSocketを使った監視ツールもどきを作ったので、それについての簡単な説明と、各種技術要素(Python, Jolokia)のTips
WebSocketの中身を覗いてみる - m-kawato@hatena_diary
この記事は、HTML5 Advent Calendar 2012の15日目のエントリーです。 WebSocketは、Webサーバ・ブラウザ間で双方向に通信するための仕様であり、APIとプロトコルがそれぞれ以下の規格で定義されています。 API: W3C WebSocket API プロトコル: IETF RFC 6455 - The WebSocket Protocol (日本語訳) Node.js + Socket.IO のようなライブラリを使うと割と簡単にWebSocketが使えますが、中で何が起こっているかもう少し追ってみたいという動機により、tcpdump+WireSharkによるパケットキャプチャを通してWebSocket通信の中身を調べてみました。 作業環境 サーバ側、クライアント側ともホストはWindows 7 (64ビット版) で、サーバはその上の仮想マシンとして動かしてい
Tornado v0.2 で websocket やってみた - Twisted Mind
tornado は git clone してきて python setup.py install したものを使っています。 コードは tornade/websocket.py に書いてあったコメントそのままです。なんかコメント少し間違ってますね、send_message って書いてますが write_message ですね。 さて、これの問題としては今繋がっているであろう connect 一覧がとれないということです。open した時に何かしらグローバル変数のリストで持ってるのがスマートなのかな。でも close したときに気づけないとリストの中身が増え続けるので微妙。 さて、どうしたものか。 main.py # vim: fileencoding=utf8 import time import datetime import tornado.httpserver import torna
WebSocket サーバの実装とプロトコル解説 - Block Rockin’ Codes
intro なんだかんだ WebSocket を使ってるのに、 WebSocket サーバを自分で書いたことが無かったので、RFC も落ち着いてきたここらで、仕様を読みながら実装してみようと思いました。 "WebSocket サーバ 実装" とかでググると、 Socket.IO とか pywebsocket で WebSocket アプリ作って、「WebSocket サーバを実装」みたいなタイトルになってることが多いみたいですが、 (Apache に PHP で HelloWorld して、「HTTP サーバ実装しました」とは言わないよね。) この記事では、 WebSocket プロトコルをしゃべるサーバ自体を実装します。 といっても、全部やるのはちょっと大変だったので、基本的なテキストメッセージのやりとりの部分だけやって、エコーサーバができるところまでやりました。 完成版のソースは以下で
WebSocket のバイナリメッセージを試したら、ウェブの未来が垣間見えた
長い記事なので、先に結論だけ書いておきます。WebSocketのバイナリメッセージ機能は、これまでのインターネットのあり方をひっくり返します。「そんなの知ってるよ」という方もいるとは思います。僕も理屈では分かってたつもりだけど、実際にアプリを作ってみて、具体的にそれを感じることができたので、ちょっと長いですがどういうことなのか説明してみます。 WebSocketとは # WebSocketは、HTML5関連の中でも特に注目を集めている技術の一つです。通常のHTTP通信であればクライアントからのリクエストなしにサーバーは応答しませんが、WebSocketを使うことでクライアントとサーバーの間で双方向の通信が可能となります。これを利用することで、今後様々なリアルタイム性の高いサービスを構築することが可能になるでしょう。 そんなWebSocketですが、これまで波乱の道を歩んできました。数年前か
WebSocketの基礎知識(2012年年始版) (Kanasansoft Web Lab.)
WebSocketに関する、よくある質問や知っておいたほうがよさそうなことをまとめてみました。 技術的なことについては深くはふれていません。 あやまりがあれば指摘してください。 Q. 仕様が2つあるみたいだけど... A. WebSocketは、主にブラウザ上で使うことを考慮された通信の規格で、通信の「プロトコル」とJavaScriptから使うための「API」に仕様がわかれています。前者は「WebSocket Protocol」として「IETF」が、後者は「WebSocket API」として「W3C」がかかわっています。 Q. WebSocketってまだ仕様が固まってないんじゃないの? A. WebSocket ProtocolはIETFのRFCの「標準化提案」に、WebSocket APIはW3Cの「勧告候補」になりました。IETFにもW3Cにも承認プロセスがあり、それぞれ最後には「標準
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
