賽拉維的秋天

春節連假除了和家人團圓過年外，
當然也要精實一番研究一下 Node.js，
這次柯南要研究的主題是 Socket.IO !
什麼是 Socket.IO 呢?
簡言之，
Socket.IO 是一套提供即時通訊且跨平台的套件。

根據 Socket.IO 官方網站的資料，
基本上主流的瀏覽器都有支援了！
這個套件亦有實際使用的 case ，
例如 zynga 的 Poker HTML5 version。

延續柯南前面幾次的練習，
這次仍然在 express framework的架構下，
使用 socket.io 。
安裝的指令如下：
npm install socket.io express

接著 在 express 架構下的 app.js 檔中
撰寫如下語法

var express = require('express'),   
app = express.createServer(),   
io = require('socket.io').listen(app)

並在 server 的 controller 寫下如下語法

io.sockets.on('connection', function (socket) {
function getI() {   
return 'Node JS World' + i;   
};
function loop() {
i++;
socket.emit('news', { hello: getI() });
setTimeout(function() {  loop(); } , 1000);
};           
loop();
socket.on('my other event', function (data) {
console.log(data); });   
}); 

在html的 client code 寫以下語法

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script> 
var socket = io.connect('http://localhost:3000'); 
socket.on('news', function (data) {   
console.log(data.hello);   
socket.emit('my other event', { my: 'data' }); $('#title').html(data.hello);         
});
</script>
<h1>{{title}}</h1>
<p>Welcome to <span id="title">{{title}}</span></p> 

如此一來 server 端會每一秒鐘在 news 這個頻道發出 Node JS World 秒數 給 client 端，
並持續監聽 my other event 這個頻道 

相對地，
client 端會接收 news 頻道的資訊後，
進行更新頁面上的 HTML 顯示資料。
與發出 my other event 的資料 my data，
這個時候我們可以在 server 的 console 看到這段回傳的訊息。

這些溝通完全是即時與跨平台的，
如果各位朋友有這方面需求的，
可以考慮 Socket.IO 這個 Node.js 的 package :)

Technorati Tags: development, JavaScript, Node.js, Note, programming, Socket.IO