阅读(3.9k) 书签赞(1) 我要纠错

在 Apache Cordova 中使用 Socket.IO

2018-10-16 18:37 更新

由于 Apache Cordova 应用主要使用 JS 编写，集成 Socket.IO 很简单！下面将通过一个例子来演示。

首先我们创建一个简单的服务器：

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);

服务器将监听 Socket.IO 客户端连接事件，并通过触发 text 事件发送消息给客户端。

接下来创建一个新的 Cordova 项目，并修改它。让我们从头开始。

运行

npm install -g cordova

这将安装 Cordova 命令行工具。我们通过它来创建项目，安装/移除依赖，启动模拟器以及完成其它任务。

cordova create socket.io-example socket.io.example socket.io-example

这将创建一个新的项目模板，我们将在这个模板的基础上进行修改。可以仔细看看新建的 socket.io-example 目录及其内容。

进入项目目录。命令行中可以通过 cd socket.io-example 命令切换。

由于我是在 OS X 下开发，我将基于 iOS 构建项目。Android 的构建方法也差不多。运行下面的命令添加构建目标：

cordova platform add ios

运行下面的命令构建原生组件：

cordova build ios

接下来我们运行模板应用以确定一切正常。在 OS X 下，可以通过如下方式安装 iOS 模拟器：

brew install ios-sim

通过 cordova emulate ios 命令运行模拟器，你将看到如下画面：

null

一切都工作正常，我们开始写代码。打开项目目录下的 www/index.html 文件。内容应该如下：

<!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>

接下来添加业务逻辑，我们将代码添加到 app.initialize 调用的后面。我们需要确保先加载应用，再运行业务代码，可以这样写：

<script type="text/javascript">
  app.initialize();

  document.addEventListener('deviceready', function() {
    // 代码写在这
  });
</script>

应用完全加载之后，事件将会被触发。业务逻辑应当添加到回调函数中。我们需要在连接到服务端时，响应服务端发送的文本消息，并弹出一个通知来显示文本消息，可以这样写：

<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 重新运行模拟器，结果如下：

null

这就行了！希望这个教程可以帮到你！

以上内容是否对您有帮助：

写笔记

我要补充