免費AI編程助手
在 Apache Cordova 中使用 Socket.IO
由于 Apache Cordova 應(yīng)用主要使用 JS 編寫，集成 Socket.IO 很簡單！下面將通過一個例子來演示。
首先我們創(chuàng)建一個簡單的服務(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)聽 Socket.IO 客戶端連接事件，并通過觸發(fā) text 事件發(fā)送消息給客戶端。
接下來創(chuàng)建一個新的 Cordova 項目，并修改它。讓我們從頭開始。
運行
npm install -g cordova這將安裝 Cordova 命令行工具。我們通過它來創(chuàng)建項目，安裝/移除依賴，啟動模擬器以及完成其它任務(wù)。
cordova create socket.io-example socket.io.example socket.io-example這將創(chuàng)建一個新的項目模板，我們將在這個模板的基礎(chǔ)上進(jìn)行修改。可以仔細(xì)看看新建的 socket.io-example 目錄及其內(nèi)容。
進(jìn)入項目目錄。命令行中可以通過 cd socket.io-example 命令切換。
由于我是在 OS X 下開發(fā)，我將基于 iOS 構(gòu)建項目。Android 的構(gòu)建方法也差不多。運行下面的命令添加構(gòu)建目標(biāo)：
cordova platform add ios運行下面的命令構(gòu)建原生組件：
cordova build ios接下來我們運行模板應(yīng)用以確定一切正常。在 OS X 下，可以通過如下方式安裝 iOS 模擬器：
brew install ios-sim通過 cordova emulate ios 命令運行模擬器，你將看到如下畫面：
一切都工作正常，我們開始寫代碼。打開項目目錄下的 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>接下來添加業(yè)務(wù)邏輯，我們將代碼添加到 app.initialize 調(diào)用的后面。 我們需要確保先加載應(yīng)用，再運行業(yè)務(wù)代碼，可以這樣寫：
<script type="text/javascript">
app.initialize();
document.addEventListener('deviceready', function() {
// 代碼寫在這
});
</script>應(yīng)用完全加載之后，事件將會被觸發(fā)。業(yè)務(wù)邏輯應(yīng)當(dāng)添加到回調(diào)函數(shù)中。我們需要在連接到服務(wù)端時，響應(yīng)服務(wù)端發(fā)送的文本消息，并彈出一個通知來顯示文本消息，可以這樣寫：
<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 重新運行模擬器， 結(jié)果如下：
這就行了！希望這個教程可以幫到你！
更多建議：