WebSocket の辛さを Yjs で解決した話 | CyberAgent Developers Blog
こんにちは。AI事業本部 オンライン接客事業部のGokanです。 オンライン接客システム「リモてなし」の開発チームの中で、フロントエンドを主に担当しています。 今回は、システムにYjsを導入したので、その紹介をしたいと思います。 話としては「WebSocketとYjsを使うことで抱えていた課題を解決できた」という内容になっています。 目次 オンライン接客システム「リモてなし」の特徴 今までの課題 新たに導入した Yjs とは データがマージできる仕組みの概要 リモてなしでの活用 オンライン接客システム「リモてなし」の特徴 まず、リモてなしの特徴は、システムを挟んで人と人がリアルタイムにコミュニケーションをとることです。これは相手の顔が見える、声が聞こえるというだけではありません。他にも、パワポなどの資料共有、商品の提案、アンケート送付などをすることができます。 また、リモてなしは「対面以上
Server-Sent Events, WebSockets, and HTTP
Hi, I’m Mark Nottingham. I usually write here about the Web, protocol design, HTTP, and Internet governance. Find out more. Comments? Let's talk on Mastodon. @mnot@techpolicy.social other HTTP posts Yet More New HTTP Specs Wednesday, 8 June 2022 A New Definition of HTTP Monday, 6 June 2022 How Multiplexing Changes Your HTTP APIs Sunday, 13 October 2019 Designing Headers for HTTP Compression Tuesda
「ぬこしょうぎ」におけるリアルタイム通信 - かばちんのエンジニアブログ
リアルタイム将棋「ぬこしょうぎ」をリリース 先日こんなアプリをリリースさせて頂きました。 ぬこしょうぎ - ヤルキマントッキーズ株式会社 将棋をモチーフにコマの動きは将棋そのままで、将棋からターン制をバッサリと取り除いたゲームです。 ルールはシンプルなので将棋を知らない方でも楽しめる仕様になっています。 （不思議なことにターン制を取り除いてもやっぱり将棋を知っている人が若干有利になるようです！） 通信をどのような構成で、何を使ってやっているか ◆サーバサイド（コネクションサーバ） クライアントからの WebSocket 接続を受け付けるサーバ。 知人が作成した nginx-luajit-websocket-pubsuber を利用して WebSocket 接続を受け付けている。 github.com 簡単に説明すると、nginx で接続を受け付けて WebSocket コネクションを維持し
Tokyo.ex #3 Masterling // Speaker Deck
All slide content and descriptions are owned by their creators.
Guts of Phoenix websocket channels
Final results from Phoenix channel benchmarks on 40core/128gb box. 2 million clients, limited by ulimit #elixirlang pic.twitter.com/6wRUIfFyKZ — Chris McCord (@chris_mccord) October 28, 2015 I knew that Phoenix framework could handle a lot of simultaneous websocket clients but the result that Chris posted just amazed me. This piqued my interest of how phoenix framework web socket layer actually wo
WebSocket and Web Application Framework - Qiita
WebSocket はネットワークの双方向通信の規格で、リアルタイム通信の用途で利用されています。 Web Application Framework の Phoenix は WebSocket を標準でサポートしています。 Rails も Action Cable で WebSocket の利用がサポートされるようになります。 そこで Express を合わせて３つの Framework で WebSocket のサンプルを作成しました。 ( bash コマンドの brew は Mac OS X で利用できます。他OSは適宜のコマンドを利用してください。 ) Node.js on Express Express は JavaScript が言語の Web Application Framework です。 Socket.IO という WebSocket のライブラリが有名です。 Setu
Phoenix で WebSocket 通信をする - Qiita
Phoenix には Channel という概念があり、これを JavaScript と組み合わせて使うことでブラウザと WebSocket 通信ができるようになります。 今回は公式ドキュメントを参考に、Channel を使ったサンプルアプリケーションを作ってみます。 チャットだと地味なので、d3.js のこの Example を使って遊んでみようと思います。 Phoenix アプリケーションの作成についてはコチラを参照してください。 サーバサイドを実装する channel_sample という名前でアプリケーションを作ります
リアルタイム通信環境の(一部)構成紹介 : DSAS開発者の部屋
こんにちは。 今回は、当社で稼働させているリアルタイム通信環境について、ご紹介させて頂きます。 ご紹介する環境に対する要件は、以下となります。 ・ゲーム内の期間限定イベントで使用し、イベント開催中のみサーバを稼働 ・リアルタイム通信。プロトコルは、websocket を使用 ・同じチームに所属するユーザを同じサーバへ接続 ・とりあえずいっぱいスケールできるように(笑 最後の要件は冗談で、実際にはちゃんとした数値を頂いているのですが、このような環境構築を依頼されましたので、AWS 上で以下にあるような構成を考えてみました。 構成図 ※ 主要なサーバのみを抜粋 ELB 外部のクライアントから、websocket な接続を受け付けます。 http(s) モードでは、websocket の通信確立に必要なヘッダが消去されてしまうため、tcp モードを使用しています。 tcp モードを有効にすると、
Benjamin Tan's Learnings & Writings - The Phoenix Web Framework for Elixir and Websockets
It has been a really long while since my last Elixir post. I have been doing a lot of research and learning for my upcoming book. Introducing Phoenix & Websockets example application We’re going to learn how to create an application that uses websockets. This is how it looks like: This is taken off Cowboy’s Websocket Example. This example application demonstrates bi-directional communication betwe
Load-balancing Websockets on EC2
How we set up a robust and scalable stack on top of socket.io For the last few months, we have been working on a completely new Storify Editor which enables real-time collaboration. Storify real-time collaborationStackThe editor is a standalone server built with Node.js and socket.io in order to have a 2-way, real-time communication between the client and the server. The goal is to push changes to
アプリ向けのサーバーAPIは「REST」 or 「WebSocket」？
アプリとサーバー間のやりとりをREST APIかまたはWebSocketで実装するか迷ったときの覚書。 よくまとまっているサイト WebSockets versus REST? （上記サイトの日本語訳）WebSockets vs. REST? 今のところ「共存出来るんだから、それぞれの特性を理解して使い分けろ」に落ち着いている感じ。 WebSocketでやりとりするメッセージにルール付けして、RESTを表現しようとする動きもある。 SwaggerSocket Protocol · swagger-api/swaggersocket Wiki NginxはWebSocketをリバースプロキシ出来るし、ロードバランサとしても動作する。 NGINX as a WebSockets Proxy - NGINX ExpressJSとSocket.IOでセッションを共有出来る。 node.js - s
TrickleICEとは - WebRTCの要素技術 -
WebRTCで用いられる要素技術の一つとして、TrickleICEがある。本ポストではTrickleICEについてわかりやすく解説する。 イメージを掴んでもらえるよう平易説明するので、正確さを重視される場合は、RFCを参照いただきたい。 本記事のサマリ：TrickleICEとは？ TrickleICEを一言で表すと、 「ICEの候補をインクリメンタルに探して、 見つかったICE候補を接続先ピアと交換して、 すぐに接続を試行する仕組み」 である。 以下に、背景を含め詳細を解説する。 最低限のおさらい（STUN/TURN) WebRTCで通信をするブラウザは、NAT配下に隠れていることが多い。 そのため、ブラウザ間で直接通信するためには、プライベートアドレスではなく、 グローバルアドレスの情報を利用する必要があり、何らかの仕組みを活用する必要がある。 その仕組みとして用意されてい
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 西田慎吾（株式会社アイ・エム・ジェイ） WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（後編） 前回に引き続きHTML5 Japan Cup 2014にてWebGL賞と優秀賞をいただいたオンラインレースゲーム、JS-Racingの技術解説をさせていただきます。 サーバサイドの使用技術 サーバサイドの技術としてNode.jsを使用しています。Node.jsはサーバーサイドで動作するJavaScriptで、ノンブロッキングI/Oというモデルを採用しています。非同期処理でデータベースへのアクセスとWebページの表示を別々に行ってくれるので、ストレスなく大量のページの表示が出来ます。また、Socket.ioというライブラリを扱うことで、WebSocke
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編）
WebGLとWebSocketによる3Dオンラインレースゲーム「JS-Racing」の全て！（前編） 西田慎吾（株式会社アイ・エム・ジェイ） 今回はHTML5JapanCup2014にてWebGL賞と優秀賞を受賞したオンラインレースゲーム、JS-Racingの技術解説を書かせていただきます。 このコンテンツはWebGLの3D表現を活かした3Dレースゲームです。 また、WebSocketを使用しサーバを介して、複数のクライアントでの同時走行が可能なオンラインゲームになっています。同時に、ソケット通信時に発行されるソケットIDをPCとスマートフォンで共有することで、スマートフォンからPC上の車を操作することも可能です。 クライアントサイドの使用技術 クライアントサイドの構築において、目的・用途に応じて使用した言語やライブラリに関して解説します。 TypeScriptによるクラス設計 クライアン
Server Sent Events(SSE)の使いどころと使い方 | GREE Engineering
Flameの箱を捨ててしまったためどうやって送り返すか困っています。@kyo_agoです。 今日は2014年6月にβ公開したGREEチャットで通信に使用しているSSEを紹介したいと思います。 SSEとは SSEとはServer-Sent Eventsの略でW3Cで提案されているhtml5関連APIの一種です。 これはサーバとの通信やJavaScript APIを中心としたもので、サーバからPush通信を行うための仕様です。 サーバからPush通信に関してはこれまでもCometやWebSocketが存在しましたが、SSEは互換性や効率などの点でそれ以外の技術に対する特徴があります。 ここからは具体的な仕様や、実際に使用した場合の感想などを紹介したいと思います。 通信方式 SSEはHTTP/1.1を使用し、Content-Type: text/event-streamで通信を行います。 基本的
サーバPUSHざっくりまとめ
ポーリング、Ajax、Comet、Server Sent Events、WebSocket サーバPUSH方式の大雑把な比較 Read less
Server-Sent Eventsまとめ。ハイパフォーマンスブラウザネットワーキング16章 - lxyuma BLOG
まだ、社内でO'Reillyのハイパフォーマンスブラウザネットワーキングの読書会をやっていて、 自分が、１６章のserver sent eventsやるので、その下書き。(前の資料もいつかblogにupする) ※ちなみに、書いてる事を単にまとめてるわけではないので、ご注意を。 ハイパフォーマンス ブラウザネットワーキング ―ネットワークアプリケーションのためのパフォーマンス最適化 作者: Ilya Grigorik,和田祐一郎,株式会社プログラミングシステム社出版社/メーカー: オライリージャパン発売日: 2014/05/16メディア: 大型本この商品を含むブログ (2件) を見る 16章 Server Sent Events よく言われるのがSNSのTimelineの更新とかで使える仕組み server sent eventsってwebsocketと被っている事もあって、中々目立たないで
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
スケール可能で運用しやすいWebSocketサーバ設計の課題と工夫 / The development of scalable and operating friendly WebSocket Server
High Performance WebSocket
GitHub - satori-com/tcpkali: Fast multi-core TCP and WebSockets load generator.
