WebSocketとは HTML5仕様を構成する要素の一つで一方向通信しかできなかった既存のHTML通信とは違って、 JavascriptのWebSocket APIとサーバサイドのWebSocket機能でクライアントとサーバ間の両方向通信を可能にする技術だ。 WebSocketの特徴 WebSocketは、通信ごとにHTTPコネクションを開く・閉じるのを繰り返すのではなく、 いったんHTTPコネクションを開いたら、コネクションを開いたままにしておいて、データをやりとりする。 コネクションが維持される間は、Ajaxのようにクライアントからサーバへの通信だけでなく、 サーバからクライアントに直接データを送ることもできる。 以下は、ChromeでWebSocketの公式サイトにあるデモを試したキャプチャである。 "Rock it with HTML5 WebSocket"という文字列を何回もS

はじめに v8 を利用した C++ から JavaScript へクラスを簡単にエクスポートするヤツ作ってみた - 凹みTips にて作った C++ クラスを JavaScript に持っていくヤツをちょっと改良しました HAS-Project/v8.hpp at master · hecomi/HAS-Project · GitHub create_context とか明示的にやらなくても良いようになってます。HandleScope がメンバ変数になってるとか色々イケてないところはまだ沢山ありますが…。 これを使って Julius、iRemocon、OpenJTalk を JavaScript から制御できるようにしました。 hecomi/HAS-Project · GitHub できるようになったこと JavaScriptからこんなことが出来るようになりました。 function te

このガイドでは、ウェブサイトとサーバーの間でデータ交換をするために、 XMLHttpRequest を使用して HTTP リクエストを発行する方法を紹介します。 XMLHttpRequest のよくある使用例やもっと分かりにくい使用例も含まれています。 HTTP リクエストを送るには、 XMLHttpRequest オブジェクトを作成し、 URL を開き、 リクエストを送信します。 トランザクションが完了すると、オブジェクトには結果の HTTP ステータスコードやレスポンスの本文などの有益な情報が格納されます。 function reqListener() { console.log(this.responseText); } const req = new XMLHttpRequest(); req.addEventListener("load", reqListener); req.o

Ajax とは Asynchronous JavaScript + XML の略で、 Web サーバーとブラウザとの間で非同期通信を行う方法です。 Ajax の方法を利用することで、ページを切り替えることなくページの内容を書き換えることができるようになります。 JavaScript では Aax を用いた非同期通信には XMLHttpRequest オブジェクトを使用します。ここでは Ajax を使った非同期通信を行う方法について解説します。

XMLHttpRequest オブジェクトを使用することで Ajax を使った非同期通信を行うことができます。ここでは Ajax による非同期通信を行うために XMLHttpRequest オブジェクトの作成し、サーバへリクエストを送信したあと、サーバからレスポンスを受信するまでの方法について解説します。

音声入力というのはずっと昔からあるわりには一般的な普及が進まない技術だ。もちろん、何らかの障害がある方々の間では利用されているが、もっと一般に普及しなければよりよい技術革新やコスト低減などが臨めないのではないだろうか。 単語の認識精度は高い そんな中、一つのきっかけになり得るソフトウェアが登場した。なんとJavaScriptを埋め込むだけで音声入力が可能になる。 今回紹介するオープンソース・ソフトウェアはw3voiceIM.js、Web APIを使った音声認識ライブラリだ。 w3voiceIM.jsはw3voice.jpで提供される音声認識エンジンをJavaScriptだけで利用できるようにするライブラリだ。テキストボックスやテキストエリアに対して利用可能で、オブジェクトをダブルクリックすると音声入力のダイアログが表示される。 Pukiwikiに組み込まれた例。テキストエリアに音声入力でき

はじめに 前々回、前回からの続き。jQueryのWebカメラプラグインよりキャプチャ速度が早いFlashを作成することができたので、これを用いてなんちゃってビデオチャットを作り直しました。とりあえず、今回で完成ということに致します。 実際に動かしたときの様子を録画しましたが、何故か最初の数秒が変な感じになってしまいました(；・∀・) 上の段の映像は自身のWebカメラの映像を描画し、下の段の映像は相手のWebカメラの映像を描画しています。この動画では、ビデオチャットを行っているノートPC同士を向かいあわせに置き、PC同士の間の空間で手を動かしています。ところどころ描画が引っかかる時がありますが、これぐらいのフレームレートとタイムラグならビデオチャットとしてはギリギリ使い物になる気がします。 上の動画を録画したときの環境では、ノートPC*2台とWebSocketサーバは同一ネットワーク内に居た

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

dotCloud が WebSocket に対応したという発表がありました。 dotCloud Announces Native Support for WebSockets | dotCloud Blog dotCloud は多くの言語やミドルウエアに対応していて、 CLI からアプリがデプロイできる PaaS サービスといった感じです。 (Heroku なんかをイメージしてもらうとわかりやすいかも。) 早速、 Node.js + Socket.IO でどんなもんか試してみました。 アカウントは自分は結構前にとったんですが、今ならすぐ取得できるっぽいです。 CLI のインストール 専用の CLI があるのでそれをインストールするところから始めます。 http://docs.dotcloud.com/firststeps/install/ にある通り、 Python の pip で入れます