食べログノートでWebSocket不要の(ほぼ)リアルタイム更新を実現した話 - Tabelog Tech Blog
目次 目次 はじめに リアルタイム化の必要性 解決策の検討 予約状況の更新に必要な速度を検討 実装案のブレスト 採用するアーキテクチャの決定 実装の詳細 リリース戦略 リリースによる効果 まとめ 最後に おまけ（メディア掲載の紹介） はじめに こんにちは！ 食べログ開発本部 ウェブ開発1部 FEチームの佐々木です。 私たちが開発している食べログノートは、レストラン向けのオンライン予約台帳です。ネット予約、電話予約、ウォークインの管理、顧客管理、卓管理などを一元的に行えるツールです。 その中でも特に重要な機能がタイムスケジュール画面です。この画面は、食べログノートの中でも最もよく使われる機能です。登録された卓と予約時間を表示し、ドラッグアンドドロップで卓や時間の変更が簡単に行えます。 今回の記事では、このタイムスケジュール画面において、WebSocketを使用せずに（ほぼ）リアルタイム更新を
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
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #WebSocketとは Webにおいて双方向通信を低コストで行うための仕組み。プロトコルの一種。 #WebSocketの必要性 ###Web通信といえば HTTP。 主にHTMLで書かれた文書を転送するためのプロトコル。 HTTPの規格が制定された当時のWebは、遠隔地にいる人同士が知識を共有するためにあった。 ###Webの用途は変わってきた SNS等の登場によって、リアルタイムなやりとりが求められるようになった。 だれかのアクションがリアルタイムで他のユーザーに伝わり、ほかのユーザーもリアクションすることができる。 このリアルタイ
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
この記事は、2015年のGo Advent Calendarの3日目の記事です。 さてGoのHTTPといえばnet/httpにおいて今までどおりのコードでHTTP2対応が出来るようになる変更がGo1.6にて入るようになりますが、それはさておき、突然WebSocketがしゃべりたくなったとしましょう。 WebSocketをサーバで扱う実装といえばnode.jsのものが有名ですが、Goにおいても簡単に扱う事ができます。 ここではgolang.org/x/net/websocketを用いて説明し、また最後にHTTP/1.1以前しかしゃべることのできないサーバでもWebSocketによるサーバサイドプッシュを実現できるミドルウェアである拙作のgithub.com/mackee/kuiperbeltの紹介をします。 基本的な使い方 ほぼgodocに書かれている内容どおりで申し訳ないのですが…… 使い
大量接続に耐える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ですが、これまで波乱の道を歩んできました。数年前か
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Docker と ECS と WebSocket で最強のマルチプレイ・ゲームサーバを構築
