はじめに 先日開催されたTSKaigi 2024にて配信チームとして、オンライン配信のスタッフをしていました。 当日の各トラックの配信運営や総合的な環境構築などは他のメンバーを中心に行っていただきましたが、自分は配信画面のデザインや配信に乗せる情報管理用のシステムをコツコツ作っていたのでその紹介をさせていただきます。 情報管理用のシステムといってもローカルマシン上で動く簡単なもので、NodeCGと呼ばれるNode.js向けの配信画面管理用のフレームワークを利用しました。 NodeCGとは NodeCGは先ほど紹介したようにNode.jsとブラウザ技術で動的な配信画面を作成したり、管理画面を提供してくれるフレームワークです。 配信レイアウトとダッシュボードはブラウザ上で動作し、ダッシュボードで編集した情報を配信レイアウト側にWebSocketでリアルタイムに反映したり、WebSocketサー
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
垂直スケーラビリティと効果的なテストによる金融取引システムのパフォーマンスと効率の最大化 Peter Lawrey氏はJavaチャンピオンであり、Chronicle SoftwareのCEOとして、開発者を鼓舞してソリューションのクラフトマンシップを高めることに情熱を注いでいる。経験豊富なソフトウェアエンジニアとして、Lawrey氏はソフトウェア開発プロセスにおけるシンプルさ、パフォーマンス、創造性、革新性を奨励することに努めている。
Today, we're thrilled to announce the release of Laravel 11 and Laravel Reverb. As we announced at Laracon EU, Laravel 11 introduces a minimal application structure, using SQLite by default, implementing health routing, offering per-second rate limiting, supporting graceful encryption key rotation, improving queue testing, introducing new Artisan commands, adding Resend mail transport, integrating
3月13日、Laravelが最新バージョン「Laravel 11」をリリースした。 Laravel 11は、開発者に向けた新たな機能や最適化が盛り込まれ、ますます洗練された開発体験を提供している。この新バージョンの主な特徴を紹介する。 Laravel 11のハイライト: 最小のアプリケーション構成を導入 Laravel 11では、新しいアプリケーション向けに最小のアプリケーション構成が導入された。appフォルダは劇的にシンプルになりつつも、アプリケーションのカスタマイズ性はさらに向上した。これにより、既存のLaravel開発者が慣れ親しんだ概念や知識を損なうことなく、よりわかりやすく、よりモダンな開発体験を得られるようになった。 Laravel Reverbの導入 Laravel Reverbは、Laravelエコシステムに組み込まれたWebSocketサーバーで、アプリケーションに堅牢な
はじめに どうもしょーやです。 Twitter(X)やってるのでよかったらフォローしてください 今回は最近話題になっていたHTMXを使って簡単なチャットアプリを作っていこうと思います！ チャットを作る上でwebsocketを用いたリアルタイムな通信が必要なわけですが、あまり日本語でHTMXのwebsocketを実装している記事が見つからなく💦 公式ドキュメントと睨めっこしながら手探りで作ったのでご指摘や改善案など大歓迎です！ HTMXとは 以下公式ドキュメントの内容をdeeplで和訳したものです。 htmxは、属性を使用して、AJAX、CSSトランジション、WebSocket、およびサーバー送信イベントにHTMLで直接アクセスできるため、ハイパーテキストのシンプルさとパワーで最新のユーザーインターフェイスを構築できます。 HTMXは既存のHTMLの記法を拡張したもので、JSを書かずともA
https://www.honeybadger.io/blog/building-a-simple-websockets-server-from-scratch-in-ruby/ 本記事はこちらの英語の記事のハンズオン内容を元に作成したものです。 自分で動かしてみて勉強したので忘備録として内容をまとめました。 WebSocketについて WebSocketはHTTP接続が持ついくつかの問題を解決するために発明されたプロトコルです。 例えば通常のHTTPでは、ページをリクエストするたびに接続が閉じてしまいます。 これではチャットなどリアルタイム更新が必要なアプリでは非効率ですね。 また、HTTPリクエストの継続的なポーリングや小さなリクエストの多用による接続のオーバーヘッドも問題となります。 WebSocketでは、サーバーとの間に一度開設した接続を維持し、双方向通信を実現します。 それでは
HTMXとは HTMXは、JavaScript を記述せずに、Ajax通信や高度なUXを実現できるライブラリ。 軽量 で 高速 で、既存のサーバーサイドのフレームワークとシームレスなやり取りができる。また、AJAX通信の発火、フォームの送信処理、DOMの更新などを既存のHTML要素を拡張するだけで可能とする。WebSocketやSSEにも対応しているので、チャットアプリなどにも適している。 2023 JavaScript Rising Starsでは、 フロントエンド・フレームワーク部門で見事2位に輝いた！(一位はReact、全部門だとshadcn/ui) 似たような機能として、Ruby on RailsのHotWireがあるらしい。 2024年はHTMXがくると言われているぐらい世界で騒がれているのだが、あまり日本では流行っていない。以下はGoogleトレンドで調べた結果である。 アメリ
はじめに Nostrという、SNSのようなものはご存知でしょうか？ ご存知でなければ、ぜひまず一度触ってみることをお勧めします。 割と普通にSNSっぽく使えます。 分散系SNSっぽいシステム Nostrは、分散系のSNSっぽいネットワークです。 図で表すとこんな感じ。普通に想像するWebサービスとは随分形が違うと思います。 各所のリレーサーバーに、ユーザーは投稿をばらまき、ユーザーがそれを見る形です。 分散の責任がユーザー(クライアント)側にあって、リレーサーバーが落ちたり消えたりしても影響が起きにくい仕組みです。 より詳しい説明は上記でやってるのですが、端的に言って 中央管理者がいない(各リレーに管理者はいる) 冗長で災害に強い Websocketのリアルタイム通信 オープンでシンプルで、でも拡張し放題な仕様 数多のサーバーによる分散ネットワーク といった特徴があります。 ※P2P技術は
DenoとFreshでペアプロ・モブプロ用タイマー『timer.team』を開発して得た知見⏰ これはDeno Advent Calendar 2023の22日目の記事です。 はじめに こんにちは！ LEF（@lef237）と申します。 自分は今年の夏、えにしテックという会社に入社しました。そして最初のプロジェクトとして自社アプリを開発・リリースしました。 timer.team どんなアプリかというと「ペアプロ・モブプロに特化したポモドーロタイマー」です。このアプリを開発するにあたってDenoとFreshを用いました。🦕🍋 最初にこの『timer.team』を開発した背景を説明し、それから使用技術を解説していきます。 この記事ではDenoを中心に据えつつ、広範な内容を取り上げています。自分が開発する上で詰まったポイント・理解に時間が掛かったポイントを重点的にピックアップしました。 まだ
2023年10月17日にリリースされたNode.js v21の主な変更点を紹介します。 この記事を書いている時点ではv21.4.0が最新版ですので、v21.0.0からv21.4.0までの変更点で注目の機能をまとめています。 nodejs.org fetchとWebStreamsが安定版へ WebSocketの実験的な実装 navigator.language/languages の追加 V8 11.8 による新しい JavaScript の機能 ESM をデフォルト化するフラグ 実行ファイルがESMなのか自動判定する実験的機能 import.meta.dirname/filename の追加 テストランナーがglobでのテストファイル指定に対応 警告（Warning）を無効化するフラグの追加 その他の変更点 まとめ 参考記事 fetchとWebStreamsが安定版へ github.com
wscatでcurlみたいにWebSocketの動作確認をする - Safie Engineers' Blog!
この記事はSafie Engineers' Blog! Advent Calendar 1日目の記事です。 こんにちは。セーフィー株式会社でバックエンドエンジニアをしている河津です。 アドベントカレンダーついに始まりましたね。初日の記事なので少し緊張します。 今年も様々な領域の記事がたくさん公開されると思いますので、是非他の記事も楽しみにしてくださいませ。 さて今回は、WebSocketを用いているサーバ側のアプリケーションの動作確認にwscatというツールが便利だったよという話をします。 背景 wscatとは 動作確認してみる 最後に 背景 セーフィーにはカメラの映像を視聴することができるSafie Viewerというプロダクトがあります。(デモ画面はこちら。) このプロダクトの中で、映像のサムネイルを数秒おきに更新している箇所があり、更新の手法としてWebSocketでの通信を用いてい
Rustで実装しながら学ぶWebSocketの基本
WebSocketを双方向通信のために使うプロトコルでしょ、という感じのうっすら理解で誤魔化していた[1]のですが、IoTアプリケーションぽいものを作ることがあって、理解を深めるためにあらためて学びました、という投稿です。 今回はWebSocketでエコーするサーバーを、TCPライブラリだけを用いてRustで実装していきます。コードは以下です。 WebSocketとは RFC 6455で定義された、主に双方向でやり取りするために用いられる通信プロトコルです。 WebSocketが直接用いるプロトコルはTCPですが、ハンドシェイクはHTTP(S)によって行われます。WebSocketを使うプロトコルとして、MQTT over WebSocketやSTOMPなどがあります。 最近のWebアプリケーションではごく普通に用いられてます。企業サイトなどでよく見る問い合わせ用のチャットフォームなどは、
WebSocket 入門
注意：今回の記事はあくまで初心者向けにWebSocketの概要を理解してもらうために執筆されている。そのため、一部正確性を欠く可能性がある。詳細にWebSocketについて学びたいならMicrosoftの解説記事やWebSocket Protocolを確認してほしい。 はじめに 今回の記事ではWebSocketを解説する。 対象とする読者 WebSocketについてわからないひと WebSocketとは？ WebSocketは双方向のHTTPプロトコルで、クライアントとサーバの通信で成立する。HTTPとは異なり、ws://あるいはwss://から始まる。WebSocketはHTTPとは違って、クライアントとサーバ間の接続はどちらか一方が切断されると終了する。WebSocketが動く仕組みはHTTPのそれとは異なり、ステータスコード101がプロトコルの切り替えを示す。 WebSocketが動
Best Rust Web Frameworks to Use in 2023 In the dynamic landscape of web development, Rust has emerged as a language of choice for building safe and performant applications. As Rust's popularity grows, so does the array of web frameworks designed to harness its strengths. This article compares some of the best Rust frameworks highlighting their respective advantages and drawbacks to help you make i
WebSocket 少し深掘り
以前websocketを使ったプロダクトと関ったことがキッカケで少し気になったので調べてみた。 websocketの用途等はいろんな記事でわかりやすい説明されているので省略。 大まかな流れは以下の図に示す通りだと思われる。 クライアントからprotocol切り替え依頼(http GET upgrade) サーバ承認(protocol切り替え) websocket protocolを使った通信開始 パケットの調査 以下のような単純なサーバとクライアントを実行とキャプチャして内容を確認した。 クライアントはHi!を送り、受信後にサーバはYo!を返す。 これを三回繰り返す。 ほぼこの例文の通り。 双方向のメリットを引き出せてないが一旦無視。 server package main import ( "context" "fmt" "log" "net/http" "time" "nhooyr.i
ウン十万接続のECSサービスを平和にアップデートしたい - Nature Engineering Blog
こんにちは大塚(@maaash)です。7月からCTOに復帰しました。引き続きよろしくお願いいたします。 これは第2回 Nature Engineering Blog 祭11日目のエントリです。 昨日はファームウェア・エンジニアの村田さんによる Matterでやりたかったけどできなかったこと - Nature Engineering Blog でした。 今日のお話は、話題の新製品Remo nanoやMatterとは関係ありません。 背景 先週、黒田さんが ウン十万接続のALB SSL証明書を平和に更新したい - Nature Engineering Blog を書いてくれました。 その話は ALBを二台用意して緩やかに接続を移行するようにしたら、大変平和になって僕もみんなもハッピーになった。 という話でした。ALB blue-green deploymentを使うと、ウン十万のRemoたちが
本連載は分散型マイクロブログ用ソフトウェアMisskeyの開発に関する紹介と、関連するWeb技術について解説を行っています。 ここ最近でMisskeyのユーザー数がさらに急激に増えています。そのため、運営者がより少ないコストでサーバーを維持できるよう、Misskeyのスケーラビリティ改善を急いでいます。 今回は、そういった最近のMisskeyのパフォーマンス改善の取り組みについて、検討中のものも含めて紹介したいと思います。 misskey.ioの登録ユーザー数の推移 Identicon生成の無効化オプション Identiconはユーザーが自身のアイコンを設定していないときに代わりに表示されるアイコンで、これはユーザーごとに異なるようになっています。 仕組みとしては、https://misskey.example.com/identicon/hogeにリクエストされた際に、hoge部分をシー
ウン十万接続のALB SSL証明書を平和に更新したい - Nature Engineering Blog
こんにちはSREの黒田です。 これは第2回 Nature Engineering Blog 祭9日目のエントリです。 昨日はCorporate ITのマロニーによる GASを使って社内のSaaSアカウントを可視化しよう - Nature Engineering Blog でした。 昨日に続いて今日のお話も、話題の新製品Remo nanoやMatterとは関係ありません。 TL;DR WebSocketで大量に永続接続されているALBのSSL証明書を更新すると、接続がばっこんばっこん切られて大変なので、ALBを二台用意して緩やかに接続を移行するようにしたら、大変平和になって僕もみんなもハッピーになった。 背景 そもそもNatureではどこに何のためにWebSocketを使ってるの？って話から始めると長いので、詳しくはこちらを見ていただければと思います (結構前の資料なので今とは違う部分も色々
この前ポジショントークしたらそれなりに反響があったので書いてみる。 これまでの人生を振り返ると毎年ラジオや電話や配信サービスを作っている気がするし、なんかそういう仕事が回ってくることが多い気がする。 最近自分なりに答えが出たかなと思ったことがあるので言語化してみようと思う。 OGP は Flux ぽい画像だ。 注意・免責事項 ここにあるソースコードは不完全です。これは私が元々手元で実験していたボイラープレートであるとはいえ、いろんな仕事で培ったノウハウ的なものも含まれているので、念には念を入れて意図的に要件が透けそうな箇所は削除しています。 その結果元々のボイラープレートと乖離してしまい、動作しないコードになっています。ただ概念を伝えるには十分なコードになっているはずなので、脳内補完してください。質問は Twitter のメンション、もしくは Issue でのみ受け付けます。 (完全版を書
WebSocket（Node.js）でサーバーからマインクラフト統合版にコマンドを発行する【概要編】 - マイクラの泉
マイクラ統合版に機能を追加する仕組みとして「アドオン」が存在しますが、実はアドオン以外にもWebSocketを利用すればマイクラ統合版の「外部」からマイクラを操作できます。この記事ではWebSocketサーバーの作り方と、実際に接続してマイクラを遠隔で操作する方法を紹介します。 マイクラ統合版はWebSocketでサーバーと通信できる みなさんはマイクラ統合版の「wsserver」または「connect」コマンドをご存じでしょうか。普通にプレイしていたらまず使わないコマンドだと断言できるぐらい利用頻度の低いコマンドだと思います。コマンドの説明は「指定したURLのwebsocketサーバーへの接続を試行する。」となっています。 connectコマンドの説明文（wsserverコマンドも同様の説明） 実はこのコマンド、マイクロソフトが教育用に提供している「Code Connection for
TLS, byte by byte
See this page fetch itself, byte by byte, over TLS This page performs a live, annotated https: request for its own source. It’s inspired by The Illustrated TLS 1.3 Connection and Julia Evans’ toy TLS 1.3. It’s built on subtls, a pure-JS TLS 1.3 implementation that depends only on SubtleCrypto. Raw TCP traffic is carried via a serverless WebSocket proxy. Key Raw bytes in hexadecimal. Outgoing messa
GW なんも予定がなくてブログ書くかソシャゲやるか昼から酒飲むしかやることがないです。だから予定があったら使っていたであろうお金でソシャゲに課金したらめちゃくちゃ強くなりました。やったー。友達にはドン引きされましたが、GW に予定がある人よりかは節約できていると思います。そんなソシャゲもやることなくなって暇なので酒飲みながらブログを書きます。今日は WebRTC です。 免責 筆者は RFC を読んでいません。これは「そもそも WebRTC それ自体 の RFC なんてものは存在しないもんね〜」という意味でなく、ICE や SDP の RFC すら読んでいないという意味です。そのため WebRTC そのものの解説として読むと良くない表現が含まれるかもしれません。ただし自分が WebRTC でカメラ映像を送る実装を動作させ、そのコードの解説という点では間違ったことは書いていないはずです。動作
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に
Go標準でブラウザにイベントストリーミングする
WebSocketのツラミ 中継サービスの対応がないと切れる ルーターによっては長時間アクセスがないと切れる 切れたら繋ぎなおすのはクライアントの実装次第 セキュアにつなぐためにはサーバーもクライアントも新バージョンのサポートが必要 接続数が膨れず、安定して接続を維持するのには結構ノウハウが求められる 単純に切れたら即繋ぐでは中継やサーバーに問題が発生することもある そこでEventSourceですよ メジャーブラウザでサポート・互換性も高い プロトコル仕様がただのHTTPロングポール＋アルファ なのでほとんどの接続経路で中継トラブルが少ない JSのEventSource実装がセッション維持を頑張ってくれる サーバーから切断されたら再接続をしようとする 特にGoなら標準機能でさっくりサーバーが書ける クライアント実装 let es = new EventSource("/sse"); es
こういう個人開発する時って限りなく0円に近い価格で運用したくありませんか？ 特にDiscordBotは色々制約がある上意外と作るのが難しかったので、知見を共有します あとChatGPTの話はあんまり出てきません ※この記事にはオーバーエンジニアリングを含みます DiscordBotの制約を知っておく 結論 WebSocketを常時Listenするのが一番簡単に作れるがサーバー費用がかさむ InteractionをHTTPで受け取るようにすればWebSocketほど自由度はないがFaaSの載せられる HTTPのInteractionは大体3秒以内に返答しないとタイムアウトになってしまうため、重めの処理は工夫する必要がある 作り方の制約 まず第一に、DiscordBotを作るならEC2なりVPSなりでサーバーを建ててそこで実行するのが一番簡単に作れます これはDiscordの仕様によるもので、
Implementing reactive progress tracking for AWS Step Functions | Amazon Web Services
AWS Compute Blog Implementing reactive progress tracking for AWS Step Functions This blog post is written by Alexey Paramonov, Solutions Architect, ISV and Maximilian Schellhorn, Solutions Architect ISV This blog post demonstrates a solution based on AWS Step Functions and Amazon API Gateway WebSockets to track execution progress of a long running workflow. The solution updates the frontend regula
国産のActivityPub互換な分散型マイクロブログ用ソフトウェアであるMisskeyを立ててみました。Misskeyがどんなもんか触ってみたかったのと、どうせなら構築と運用の知見もほしいなと思っただけです。また、mikutterにあるメインアカウントを捨ててこちらに移るとかではなく、こくだハイクももちろんたたみません。 Misskeyについては開発しているしゅいろさんがgihyo.jpで連載を初めているのでこちらを読むと良いです。 gihyo.jp 今回立てたサーバーは、ほぼ10年間麦子がふよふよしているだけだったmugiko.moeドメインを使いました（テスト用Mastodonもここのドメインを使ったりしてます）。ユーザー登録の解放はしてませんが、招待制でちんまりゆるゆるとやってみようかと思っています。 misskey.mugiko.moe UIと麦子イラストの相性、なかなか良い。
Twitterを代替するSNSに未来はあるのか？（前編）新SNS「Nostr」にみる新しさと懐かしさ | テクノエッジ TechnoEdge
ブロガー・著者・研究者。ブログLifehacking.jp管理人。著書に「ライフハック大全」「知的生活の設計」「リストの魔法」（KADOKAWA）など。理学博士。 @mehori Twitterへの懸念が広がるにつれて、移行先となるSNSが注目されるようになっています。それらについて、ソーシャルネットに詳しい堀正岳さんに前後編で解説してもらいます。前編は、Twitter創業者が支援していることで注目を浴びている「Nostr」についてフォーカスします。 イーロン・マスク氏がTwitterを買収して以来、サードパーティアプリの急な締め出し、説明のないアカウントの集団凍結、あるいは純粋にサービスの不安定さが増えるといった、ユーザーの不安をかきたてるニュースが毎日のように報じられています。
WebSocket を使って双方向通信をすることができるサーバーを ECS(Fargate) と ALB を使って構築してみます。サーバーは、 Node.js の ws を使って実装します。より安全な通信をするために wss を利用して通信したいので、証明書は AWS Certificate Manager(ACM) を使用して作成します。 構築する構成のイメージは、以下となります。 動作環境 Node.js: v16.15.1 ws: 8.11.0 ECR にリポジトリを作成 コンテナレジストリとして ECR を利用するため、リポジトリを作成します。今回はテスト用ですが、プライベートなリポジトリとしています。 リポジトリ作成後、プッシュコマンドの表示 をクリックすると、コンテナのビルドからプッシュまでのコマンドを確認することができるので、コマンドを参考にイメージをプッシュします。 Web
WebSocket の辛さを Yjs で解決した話 | CyberAgent Developers Blog
こんにちは。AI事業本部 オンライン接客事業部のGokanです。 オンライン接客システム「リモてなし」の開発チームの中で、フロントエンドを主に担当しています。 今回は、システムにYjsを導入したので、その紹介をしたいと思います。 話としては「WebSocketとYjsを使うことで抱えていた課題を解決できた」という内容になっています。 目次 オンライン接客システム「リモてなし」の特徴 今までの課題 新たに導入した Yjs とは データがマージできる仕組みの概要 リモてなしでの活用 オンライン接客システム「リモてなし」の特徴 まず、リモてなしの特徴は、システムを挟んで人と人がリアルタイムにコミュニケーションをとることです。これは相手の顔が見える、声が聞こえるというだけではありません。他にも、パワポなどの資料共有、商品の提案、アンケート送付などをすることができます。 また、リモてなしは「対面以上
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
Jamsocket
Backends for realtime appsThe painless session backend platform. Serverless like Lambda, built for WebSockets. Session backends are server processes that you can start instantly with an API call. Your application connects to them from client-side code. When it closes the connection, the session backend is shut down. This architecture is commonly used for multiplayer collaboration, sandboxed user c
私がDjangoでWeb開発を行う理由
はじめに 今回の記事では、私がPythonのWebフレームワーク「Django」で開発を進める理由を独自の視点から徹底解説する。今回の記事の読者の対象は主に以下の通り。 個人開発でDjangoを使おうとしているプログラマー Djangoについて深く理解したいプログラマー Djangoを個人開発(Web開発)に採用するメリット・デメリットを把握したいプログラマー すでにRailsやLaravelなど他のWebフレームワークを使った開発を経験しており、他のWebフレームワークの特徴を把握しておきたいプログラマー Web開発の技術選定で困っているプログラマー Djangoとは DjangoはPythonで開発されたWebフレームワークである。フレームワークを簡潔に説明すると、開発に必要な機能をデフォルトで揃えているものを意味する。WebフレームワークはWebアプリケーションの開発を効率化させるた
はじめに Next.js と Go で WebSocket 通信を行おう【環境構築編】 Next.js と Go で WebSocket 通信を行おう【接続編】 <- 今回の記事 Next.js と Go を利用して WebSocket 通信を行なってみます。 環境構築は前回記事を参照してください。 今回は実際に WebSocket 接続を行い、ローカル環境で双方向通信を実現させます。 このように form にデータを入力し、サーバーサイドでデータを加工して受け取ることをゴールとします。 また、今回実装したコードは上記リポジトリに公開しています。 対象読者 WebSocket 通信を用いて双方向通信を行いたい人 WebSocket とは？ ウェブ上で双方向通信を行うためのプロトコルの一種です。 ウェブ上では通常 HTTP プロトコルを用いますが、それですと一回のやり取りで一つのレスポンスし
どうも、ピクシブでフロントエンドエンジニアをやっている @uzimaru0000 です。 今回は、vite を使ったプロダクト開発をしたのでそれの知見を共有したいと思います。 なぜ vite なのか 弊社のプロダクトのフロントエンドではモジュールバンドラーに webpack を利用しているケースが多いのですが、vite を使う選択をしました。 理由としては以下のような点があります。 開発サーバーがとても速い 設定ファイルがwebpackほど複雑じゃない vite の特筆すべき特徴として開発サーバーがとても速いというものがあります。 これは、依存のあるモジュールをネイティブ ES モジュールとして読み込むようにすることで必要最低限のバンドルで済むようにしているためコードの変更がとても速く反映されます。 フロントエンドエンジニアが僕一人であったというのもあり、開発速度を早めるために vite
はじめに 今回は 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
Over the years, the HTTP request-response model has been used for client-server communications in web applications. However, with the popularity of real-time web applications, the need has emerged for servers to be able to push data to clients proactively without having clients requesting it first. As a result, push technology-based communication methods like WebSockets, and Server-Sent Events (SS
スマホゲーム業界におけるPHPの歴史とLaravel Octaneで広がるこれからのPHP | CyberAgent Developers Blog
3月24日、サイバーエージェントのエンジニア・クリエイターによる技術カンファレンス「CyberAgent Developer Conference2022」を開催しました。本記事では、「スマホゲーム業界におけるPHPの歴史とLaravel Octaneで広がるこれからのPHP」の様子をお届けします。 目次 ■サイバーエージェントグループのゲーム事業の歴史とPHP ■PHPで培ったもの ■多様化するゲームの要件とサイバーエージェントグループでの事例 ■PHPの変革「Swoole」「Laravel Octane」の登場 ■Laravel Octane Deep Dive ■まとめ ■サイバーエージェントグループのゲーム事業の歴史とPHP まずはサイバーエージェントグループのゲーム事業の歴史とPHPについて振り返ります。サイバーエージェントグループでは2009年からゲーム事業に参入しており、20
『Google Docs』や『Figma』といったリアルタイムな共同編集ツールの恩恵を受けている人は数多くいるでしょう。『Visual Studio Live Share』のようなエンジニアに嬉しいツールも生まれ、今日ではオンライン上でも円滑なコミュニケーションが可能になっています。 これらのツールの基礎にあるのが「共同編集」のテクノロジーです。本記事ではこの技術に焦点を当て、その仕組みと主にフロントエンドでの実用例について紹介します。 記事の前半では、リアルタイムな共同編集に用いられる技術やアルゴリズムについて、発展の歴史とあわせて紹介します。解説用のコードにはJavaScriptおよびTypeScriptを使用しますが、フロントエンドエンジニアに限らず共同編集の仕組みについて気になる読者が知識を深めるきっかけとなるはずです。 さらに後半ではフロントエンドの開発者目線で、前半で紹介した技
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TSKaigiは配信画面もTypeScript製だったという話
WebSockets vs Server-Sent-Events vs Long-Polling vs WebRTC vs WebTransport | RxDB - JavaScript Database
Uber、GraphQLサブスクリプションとKafkaでマイクロサービスを使用したスケーラブルなチャットを構築
Laravel 11 Now Available - The Laravel Blog
Laravel 11ついにリリース ー SQLite統合、Laravel Reverbが利用可能に
【HTMX入門】話題になったHTMXでチャットアプリ作ったよ
RubyでシンプルなWebSocketサーバーをゼロからつくってみた
もうjsなんていらない！世界で流行っているHTMXについてまとめてみた - Qiita
ハッカーのおもちゃとしてのNostrのススメ - Qiita
DenoとFreshでペアプロ・モブプロ用タイマー『timer.team』を開発して得た知見⏰
Node.js v21 の主な変更点 - 別にしんどくないブログ
Best Rust Web Frameworks to Use in 2023
Misskeyのパフォーマンス改善の取り組み・2023年7月 | gihyo.jp
WebRTC と React を組み合わせるなら Flux 設計が有効
WebRTC を理解するためにカメラ映像を送るだけの最小実装を探る
ChatGPT が回答する Discord Bot をほぼ0円運用できるように作った
Misskeyサーバーを立ててみた - あっきぃ日誌
WebSocket サーバーを ECS(Fargate) で構築してみた | DevelopersIO
Next.js と Go で WebSocket 通信を行おう【接続編】 - Qiita
vite で最高の開発体験を手に入れる - pixiv inside
Next.js と Go で WebSocket 通信を行おう【環境構築編】 - Qiita
WebSockets vs. Server-Sent Events
共同編集を支える技術とライブラリの活用 - ICS MEDIA