在 Apache Cordova 中使用 Socket.IO
由于 Apache Cordova 應(yīng)用主要使用 JS 編寫(xiě)，集成 Socket.IO 很簡(jiǎn)單！下面將通過(guò)一個(gè)例子來(lái)演示。
首先我們創(chuàng)建一個(gè)簡(jiǎn)單的服務(wù)器：
var server = require('http').createServer();
var io = require('socket.io')(server);
io.sockets.on('connection', function (socket) {
console.log('socket connected');
socket.on('disconnect', function () {
console.log('socket disconnected');
});
socket.emit('text', 'wow. such event. very real time.');
});
server.listen(3000);服務(wù)器將監(jiān)聽(tīng) Socket.IO 客戶(hù)端連接事件，并通過(guò)觸發(fā) text 事件發(fā)送消息給客戶(hù)端。
接下來(lái)創(chuàng)建一個(gè)新的 Cordova 項(xiàng)目，并修改它。讓我們從頭開(kāi)始。
運(yùn)行
npm install -g cordova這將安裝 Cordova 命令行工具。我們通過(guò)它來(lái)創(chuàng)建項(xiàng)目，安裝/移除依賴(lài)，啟動(dòng)模擬器以及完成其它任務(wù)。
cordova create socket.io-example socket.io.example socket.io-example這將創(chuàng)建一個(gè)新的項(xiàng)目模板，我們將在這個(gè)模板的基礎(chǔ)上進(jìn)行修改。可以仔細(xì)看看新建的 socket.io-example 目錄及其內(nèi)容。
進(jìn)入項(xiàng)目目錄。命令行中可以通過(guò) cd socket.io-example 命令切換。
由于我是在 OS X 下開(kāi)發(fā)，我將基于 iOS 構(gòu)建項(xiàng)目。Android 的構(gòu)建方法也差不多。運(yùn)行下面的命令添加構(gòu)建目標(biāo)：
cordova platform add ios運(yùn)行下面的命令構(gòu)建原生組件：
cordova build ios接下來(lái)我們運(yùn)行模板應(yīng)用以確定一切正常。在 OS X 下，可以通過(guò)如下方式安裝 iOS 模擬器：
brew install ios-sim通過(guò) cordova emulate ios 命令運(yùn)行模擬器，你將看到如下畫(huà)面：
一切都工作正常，我們開(kāi)始寫(xiě)代碼。打開(kāi)項(xiàng)目目錄下的 www/index.html 文件。內(nèi)容應(yīng)該如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<meta name="msapplication-tap-highlight" content="no" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>首先引入 Socket.IO-client 腳本。我們這里使用了 CDN ：
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="http://cdn.socket.io/socket.io-1.0.3.js" rel="external nofollow" ></script>
<script type="text/javascript" src="js/index.js"></script>接下來(lái)添加業(yè)務(wù)邏輯，我們將代碼添加到 app.initialize 調(diào)用的后面。 我們需要確保先加載應(yīng)用，再運(yùn)行業(yè)務(wù)代碼，可以這樣寫(xiě)：
<script type="text/javascript">
app.initialize();
document.addEventListener('deviceready', function() {
// 代碼寫(xiě)在這
});
</script>應(yīng)用完全加載之后，事件將會(huì)被觸發(fā)。業(yè)務(wù)邏輯應(yīng)當(dāng)添加到回調(diào)函數(shù)中。我們需要在連接到服務(wù)端時(shí)，響應(yīng)服務(wù)端發(fā)送的文本消息，并彈出一個(gè)通知來(lái)顯示文本消息，可以這樣寫(xiě)：
<script type="text/javascript">
app.initialize();
document.addEventListener('deviceready', function() {
socket.on('connect', function() {
socket.on('text', function(text) {
alert(text);
});
});
});
</script>輸入命令 cordova emulate ios 重新運(yùn)行模擬器， 結(jié)果如下：
這就行了！希望這個(gè)教程可以幫到你！
更多建議：