Node.jsでServer-Sent Eventsを使ってみた

setIntervalで定期的にevnetを送るのと、redisのPub/Subを利用してeventを送るのという2種類。
イベント発生時にレスポンスを書き出すようにするのは、EventEmitterを経由する。
resdisからeventを送るのを試すにはredis-cliを使って、’redis-cli publish node-sse-example:myevent foo’みたいにすればいい。
クライアントサイドのコードのも一緒に書いているけど、簡単に実行できるように1ファイルにしたかったからで、普通は分ける方がいい。
nginxでreverse proxyしたときのバッファリングをオフにするためにX-Accel-Bufferingヘッダーをつけている。
バッファリングに気をつければnginx経由でも簡単に動くので、そこはwebsocketよりだいぶ楽。

var util = require('util')
var events = require('events')
var express = require('express')
var redis = require('redis')

var app = express.createServer()
var notifyEmitter = new events.EventEmitter()
var redisClientSubscriber = redis.createClient()
redisClientSubscriber.on('message', function(ch, d) {
    util.log(JSON.stringify(['redisSubscriber', ch, d]))
    notifyEmitter.emit('myevent', 'redis node-sse-example:myevent ' + d)
})
redisClientSubscriber.subscribe('node-sse-example:myevent')

setInterval(function() {
    var len = notifyEmitter.listeners('myevent').length
    util.log(JSON.stringify(['listeners.length', len]))
    if (len > 0) {
        notifyEmitter.emit('myevent', 'interval!')
        util.log(JSON.stringify(['emit myevent']))
    }
}, 10 * 1000)

app.get('/', function(req, res) {
    var r = '<html><head><script>\n'
    var f = function() {
        var es = new EventSource('/sse')
        es.onmessage = function(m) {
            document.body.innerHTML += m.data + new Date() + '<br />'
        }
        es.onerror = function(e) {
            console.log('err:', e)
        }
    }
    r += 'var f = ' + f.toString() + '\n' + 'f()'
    r += '\n</script></head><body><h1>sever sent events test</h1></body></html>'
    res.send(r)
})

app.get('/sse', function(req, res) {
    res.writeHead(200, {
        'Content-Type': 'text/event-stream',
        'Cache-Control': 'no-cache',
        'Connection': 'keep-alive',
        'X-Accel-Buffering': 'no' // disable nginx proxy buffering
    })
    res.write('\n')
    var f = function(d) {
        res.write('data: ' + d + ' \n\n')
    }
    notifyEmitter.on('myevent', f)
    req.on('close', function() {
        notifyEmitter.removeListener('myevent', f)
    })
})
app.listen(9301)
console.log('see http://localhost:9301/')
console.log("publish by redis 'redis-cli publish node-sse-example:myevent foo'\n")

https://gist.github.com/2823050

1 day ago / 3 notes

Firefox拡張 Add-on SDK simple-prefsを使って設定画面を作る

Add-on SDKのsimple-prefsモジュールを使って簡易な設定画面を作ってみる。SDKのドキュメントは情報が少ないので、Add-ons Blogの記事も見るわかりやすい。

Just Landed: Simple Prefs API | Mozilla Add-ons Blog
http://blog.mozilla.org/addons/2011/12/08/just-landed-simple-prefs-api/

simple-prefs-on SDK Documentation
https://addons.mozilla.org/en-US/developers/docs/sdk/latest/packages/addon-kit/simple-prefs.html

設定画面の作り方は、package.jsonに設定項目の情報を書いておくだけ。アドオンの詳細画面に設定項目が追加される。

package.json

{
    "id": "jid1-7wBt2LagLajA6Q",
    "name": "fx-addon-prefs-example",
    "fullName": "fx-addon-prefs-example",
    "author": "swdyh",
    "version": "0.0.1",
    "preferences": [{
        "name": "somePreference",
        "title": "Some preference title",
        "description": "Some short description for the preference",
        "type": "string",
        "value": "this is the default string value"
    }]
}

この設定画面で設定された値はユーザが変更するたびに自動でFirefoxに保存されるので、あとは設定が変更されたときの処理をイベントリスナーで書いておけば終わり。

main.js

var prefs = require('simple-prefs')
exports.main = function() {
    prefs.on('stringPreference', function(name) {
        console.log('pref changed.', name, prefs.prefs[name])
    })
}

integerやboolでも使い方はstringと同じ。boolはチェックボックスになる。

{
    "type": "bool",
    "name": "boolPreference",
    "value": true,
    "title": "Boolean Pref"
},
{
    "type": "integer",
    "name": "intPreference",
    "value": 42,
    "title": "Integer Pref"
},

ドキュメントには今のところ、integer、bool、stringの3種類と書いてあるけれど、ソースを見るとさらにいくつかtypeが利用できそうだった。ファイルやディレクトリの選択、色の選択など。

VALID_PREF_TYPES = ['bool', 'boolint', 'integer', 'string', 'color', 'file',
                    'directory', 'control']

https://github.com/mozilla/addon-sdk/blob/master/python-lib/cuddlefish/options_xul.py

それからcontrolというのは、ボタンが配置されるだけで、他のもののように設定値が保存されることはないけれど、そのボタンが押された時になにか処理を実行するということができる。

{
    "type": "control",
    "name": "controlPreference",
    "label": "controlPref",
    "title": "Control Pref"
}

ボタンが押されたときの処理を追加するのは、設定値の変更と同じようにイベントリスナーを追加しておけばいい。

main.js

var prefs = require('simple-prefs')
exports.main = function() {
    prefs.on('controlPreference', function(name) {
        console.log('pressed controlPreference')
    })
}

simple-prefsという名前の通り、単純な設定であればこれを使うとすごく楽にできる。これでできない範囲のものは、自分でhtmlなりxulなりで書くことになると思う。AutoPagerizeはすでにHTMLで設定画面を作ってあったのとtextareaを使いたいので、controlを使ってそれを表示するボタンだけを設置することにした。

2 days ago / 18 notes