#binary websocketをはじめよう これは東京Node学園祭2012 アドベントカレンダー11日目の記事です。 みなさん、websocketで何かしらの構造化されたデータを送るとき、どうやってシリアライズしているでしょうか。 おそらく JSON.stringify あたりを使ってJSON文字列にしていますよね。実際、これは一番手軽な方法です。 しかし、通信量やCPUの処理コスト(特にサーバ側)などを考えるとJSONというものは結構無駄があります。 より通信量やCPUコストを抑える一つの方法として、バイナリでデータをやりとりする方法があります。 これはネイティブなアプリやサーバサイドでは昔から行われていたことです。 JavaScriptでも文字列をバイナリに見立てて処理するという方法もありましたが、あまり現実的ではありませんでした。 しかし、最近ではHTML5関連のAPIでTyp
nginx(1.3.13)でWebSocketのプロキシを試してみました 2013/2/19にnginxが正式にWebSocketに対応したとアナウンスがあったので、試しに使ってみました。 ダウンロード・インストール ここからnginx-1.3.13をダウンロードしてきて、インストールします。 インストールオプションはあえてデフォルトで $ wget http://nginx.org/download/nginx-1.3.13.tar.gz $ tar xvf nginx-1.3.13.tar.gz $ cd nginx-1.3.13 $ ./configure $ make $ sudo make install 設定ファイルの書き換え 次にnginx.confを書き換えます。構成は リバースプロキシ: 192.168.0.8:80 バックエンドサーバ: 192.168.0.2:3000
iOSアプリからUIWebViewなどを介さずにnode.js+Socket.IOと双方向通信するための簡単なサンプルを紹介します。 サーバ側の実装 iOSアプリからnode.js+Socket.IO間で双方向通信するには、socket.IO-objcというライブラリを使用します。 今回はサーバ側には弊社うえじゅん氏が公開している記事で作ったチャットアプリを使用しますので、まずは以下の記事を参考にチャットアプリを作っちゃってください。 Node + Socket.IO で簡単なチャットアプリの作成 チャットアプリの準備が終わったら、早速iOSアプリ側の準備をしましょう。ここからは以下の環境を前提に説明します。 Mac OS X 10.8 Moutain lion Xcode 4.5.2 iOS SDK 6.0 iOSアプリの実装 サンプルプロジェクトのダウンロード 今回紹介するiOSアプリ
Java EE 7 WebSocket Client Sample Application with JavaFX 2012年12月14日 at 7:52 午後 3件のコメント この記事はJavaEE Advent Calendar 2012の14日目の記事です。 昨日は @noriand さんによる「Spring on Glassfish」でした。 明日は@kokuzawaさんです。 2013 年 5 月 13 日追記：本ソースコードは、WebSocket の仕様が完全に FIX する前に記載したコードのため、既に記載している内容のコードでは動かなくなっています。新しい API の詳細は、javax.websocketパッケージ、javax.websocket.serverをご参照ください。 さて、今年は何を書こうかととてもなやんでいた所、昨日の深夜１２時過ぎに、 @skrb さんから、
スマートフォン向けアプリ開発やサーバサイドの開発に関する技術ブログです。 エンジニアdommyのつぶやきは@shonanshachu、ソースコードはGitHubで配信中。 Android Advent Calendar 2012に参加したdommyです。 2012年もあと2日、今年も山あり谷ありの1年でした。 12月30日はすでにAdvent Calendarに載るべき日付でも無いですが、 Androidに関する記事ならなんでも良いとの事だったので、 リアルタイム通信関連の記事を書いてみたいと思います。 前提として、Androidでの通信といえばHTTPになります。 これはクライアントからのリクエストに対して、サーバがレスポンスを返すという形で、 サーバからリクエストする事は出来ないので、 リアルタイム通信とは違います。 socket通信AndroidはNDKを使えばC言語でも実装可能なの
node.js + socket.io はリアルタイムwebアプリを作るのにとても良い組み合わせだと思っています。 しかし、基本的にsocket.ioのconnectionはhttpのsessionと関連が無いので、例えばそのconnectionがログインしているユーザのものかその他のユーザのものか区別がつかない。以前はSessionWebSocketを使ってそれを判別するようにしていたのだけど、残念なことに残念なのでコレはもう使いたくない。。 そこでclientから最初にcookieを送信してもらって、そこからclientのsessionを識別する、という方法がある、と以前@masahirohさんに教えていただきました。 *1 session共有方法 クライアント側では下記のように接続時にcookieを送信するようにしておき、 var socket = new io.Socket();
はじめに Internet Explorer 10（以下、IE10）では、HTML5や関連APIの実装が大きく進みますが、中でもWebSocketに対応することはアプリケーション開発者にとって非常に重要です。 WebSocketは、HTTPリクエストで確立した接続を「繋ぎっぱなし」にすることで、サーバとクライアントの双方向で効率的な通信を実現する技術です。WebSocketは新しい通信プロトコルです（RFC）が、HTTPと同じポート番号を使用するためファイアウォールを越えやすいのと、JavaScript APIに関する仕様もあらかじめ用意されており、Webアプリケーションとの親和性が非常に高いのも特徴です。 WebSocketは、IE10だけではなくGoogle Chrome、Firefox、Safariと言ったブラウザでもサポートされています(Operaでは、デフォルトで無効にされていま
Node.js で WebSocket-Node を使って実装しました。 転送するめぼしい画像が見当たらなかったので、デスクトップをスクリーンキャプチャして転送してみました。 ブラウザはChrome 17以上か、Firefox 11以上が必要です。サーバ側は scrrencapture コマンドを利用している関係で Mac OS X限定です。 デモ 上半分が転送元のデスクトップ、下半分が転送された画像をブラウザで表示したものです。ニコ動のコメントの飛び具合を見るとわかると思いますが、800*600の解像度の画像を、横640に縮小して転送して、1FPSくらいです。（※ これはWebSocket の限界ではありません。速度は向上させる余地はかなりありますが、今回の本質ではないので気にしないことにします） ソースは github に置いてあります。 hakobera/screencast · G
Firefox11になってとっくにWebSocketのベンダープレフィックスとれてたし、 バイナリデータの送受信の辺りがどうなってるか確認してみた。 確認したブラウザはFirefox11.0とGoogle Chrome18.0.1025.162。 サーバ側 node.jsで実装する。 httpサーバ用にconnectを使って、WebSocketサーバはWebSocket-Nodeを使う。 それぞれnpm install connect、npm install websocketでモジュール入れる。 サーバ側のコードは次の通り。 // http server var connect = require('connect'); var httpServer = connect() .use(connect.static(__dirname + '/webroot')) .listen(1234
作ってたオンラインゲームの通信部分らしきものがなんとなく出来上がったので、適当にチャットもどきを作り上げて公開してま(す|した)。 ここです http://osyoyu.com/client/ ところで、WebSocket+MessagePackを使った通信が実装できたことで嬉しくなって、XSS対策とか忘れてました。 そこに目をつけた @kyonfuee さんがjQueryを実行しまくってデザインしてくれました(!?) ありがとうございます！！ before (お世辞にも良いデザインとは言えない): っていう感じになってました。気づかないうちに簡素なページが豪華になってました。感動…！！ あと誰だ愛理をbackgroundにしたの。次からはできればロリっ娘でお願いします。 結論: XSSは積極的に放置して行け あ、最終的には em-websocket がバグって死んだっぽいので, 暇があっ
１．アドレスバーに"Opera:Config"と入力しアクセスします。 ２．クイック検索のところに"webso"まで入力すると、"Enable WebSockets"という項目が１だけに絞られますので、その項目のチェックボックスにチェックを入れて"保存"を押します。 ３．保存確認ダイアログが表示されますので、"OK"ボタンをクリック後、Operaを再起動します。 ４．WebSocketが有効になったか確認するため、適当なWebページ(yahooなど)にアクセス後、CTL+SHIFT+Iキーを入力してOpera Dragonflyを起動します。 ５． または右側にある をクリックし、コンソールを表示します。( をクリックした場合はコンソール画面がオーバレイとして表示されます。) (画像は をクリックした場合) ６．コンソールで"WebSocket"と入力してエンターキーを押します。画像のよう
WebSocket API(日本語訳)は、全二重の双方向通信を可能にするAPIで、これによりリアルタイムなWebアプリケーションを実現することができるようになります。WebSocketのプロトコル側の仕様が半年ほど前にRFCとして策定され、ようやく落ちついたところです。(まだ仕様変更がある可能性がないとは言い切れないけど) ※なお、ブラウザーは現時点(2012/07/26)での各最新のブラウザーを対象とします。(Chrome20,Firefox14,Opera12,Safari5+Safari6) また、ブラウザーに実装されているWebSocket(API)のことを"WebSocketクライアント"と呼ぶことにします。 WebSocketクライアントが実装されているブラウザー 主要なブラウザーのうち現在においてWebSocketクライアントを実装しているのはChrome,Firefox,O
Web SitesでNodejsのアプリケーションを作っていたら途中でWebSocketが使えません！という事実に気がついてあばばばばとしていたんだけど、Socket.IOはWebSocketが使えない場合は良きに計らって他の方法をとってくれたはずということを思い出したのでやってみた。 こちらを参考にサンプルを作り。 http://d.hatena.ne.jp/Jxck/20110730/1312042603 git pushでデプロイ。 なんかwsのinstall.jsが走るときに"Native Code Compile Failed (but the module will still work)"とか警告がでているがとりあえずデプロイ自体は成功。 サイトを表示してみるとちゃんと通信できていた。スバラシイ。 Socket.IOを使えばサーバプッシュ的なことはできそうですね。 ところで、
はじめに エンジニアの@ryooo321です。 よろしくお願いします。 Happy Elements株式会社では勉強会が活発に行われており、 その中の1つに「1.5時間で○○を作る」エンジニア向けワークショップがあります。(毎週開催@京都) ※ ○○は毎週かわり、設計/実装方法などは自由です。 今回はワークショップ2回(計3時間)で作成したボンバーマン風ゲームの紹介を通して、 他人とリアルタイムで遊べるゲームの可能性を感じていただければと思います。 ※ 技術的にはwebsocket、canvasを利用 ※ ライブラリ/ツールとしてNode.js、CreateJS、socket.io、coffeescriptを利用 ※ 急いで作ったのでほとんどリファクタリングされていませんmm また、おまけとして サーバーサイドでのcanvas描画とwebsocketでのバイナリメッセージについて 試してみ
最近のJavascript関係ではWebSocketとWebWorkerが気になってたんだけど、 WebSocketの方はnode.jsとかJettyとか？サーバ側にも仕掛けが必要なので、 手っ取り早くできる方ってことで、今更ながらWebWorkerを試してみた。 試してみたかったことは次の点。 基本的な使い方 jQueryとかのライブラリが使えるか オレオレクラスが使えるか とりあえずこれらに絞ってお試し。 基本的な使い方 インスタンスを生成して、メッセージでやりとりする。 まず、こんな感じのHTMLを用意して。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/
Canvas/WebSocketでディアブロクローンなネトゲを作ってみた - mizchi logの解説 ちゃんと勉強して実装したわけじゃないけど、つくってみたい！と思った人が一通り実装できる程度の解説をする。 ゲームプログラミングとウェブプログラミングの初歩を知ってるとなお良い。(というか僕自身どっちも微妙なのだが) ソースコードはこちら GitHub - mizchi-sandbox/ws-netgame: WebSocketを用いたネットゲーム 前提として、CoffeeScript、WebSocketを使う なお、以下のコードは概念を説明するために簡略化したもので、socket.io , coffeescriptの微妙な挙動については検証していない。あくまで擬似コードの一種として読むように。 MVCにわけて解説する。 Model サーバーのセーブデータ。基本的にログイン中はオンメモリ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
