android - Phone gap + socket.io + heroku-6ren

android - Phone gap + socket.io + heroku

转载作者：行者123 更新时间：2023-11-29 01:35:58

我有一个应用程序调用托管在 heroku 上的 socket.io 服务器。当我使用命令“phonegap serve”在我的手机(android)上启动我的应用程序时，出现此错误:

[phonegap] Proxy error for url: myserverheroku:3000/socket .io/?EIO=3&transport=polling&t=1421696372422-2 undefined [phonegap] ECONNREFUSED myserverheroku:3000/socket.io/?EIO =3&transport=polling&t=1421696372422-2

你能帮忙吗？

(对不起我的英语，我是法国人)

server.js 文件:

var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendfile('index.html');
});

http.listen(process.env.PORT || 3000);

io.on('connection', function (socket) {
  socket.emit('news', { message: 'Hello world' });
});

app.js 文件:

var socket = io.connect('http://star-wars-bluff.herokuapp.com');
socket.on('news', function (data) {
    document.getElementById('welcomeMsg').innerHTML = data.message;
});

index.html 文件:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <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" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <title>Star Wars Bluff</title>
    </head>
    <body>
        <div class="jumbotron text-center">
            <h1>Star Wars Bluff</h1>
        </div>
        <div class="container">
            <div id="welcomeMsg"></div>
        </div>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script><!-- load angular -->
        <script type="text/javascript" src="cordova.js"></script>
        <script src="http://star-wars-bluff.herokuapp.com/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </body>
</html>

config.xml 文件:

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.heroku.star-wars-bluff" version="1.0.0" versionCode = "10" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>Star Wars Bluff</name>
    <description>
        Le poker des cafards version Star Wars
    </description>
    <author email="contact@labo-web.fr" href="http://labo-web.fr">
        Labo web
    </author>
    <content src="index.html" />
    <preference name="permissions" value="none" />
    <preference name="phonegap-version" value="3.5.0" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="7" />
    <preference name="android-installLocation" value="auto" />
    <!-- <gap:plugin name="org.apache.cordova.battery-status" />
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:plugin name="org.apache.cordova.media-capture" />
    <gap:plugin name="org.apache.cordova.console" />
    <gap:plugin name="org.apache.cordova.contacts" />
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.device-motion" />
    <gap:plugin name="org.apache.cordova.device-orientation" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.file" />
    <gap:plugin name="org.apache.cordova.file-transfer" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.globalization" />
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.media" />
    <gap:plugin name="org.apache.cordova.network-information" />
    <gap:plugin name="org.apache.cordova.splashscreen" />
    <gap:plugin name="org.apache.cordova.vibration" /> -->
    <icon src="icon.png" />
    <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon-36-ldpi.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon-48-mdpi.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon-72-hdpi.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon-96-xhdpi.png" />
    <icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="www/res/icon/ios/icon-57.png" width="57" />
    <icon gap:platform="ios" height="72" src="www/res/icon/ios/icon-72.png" width="72" />
    <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon-57-2x.png" width="114" />
    <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon-72-2x.png" width="144" />
    <icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />
    <access origin="http://star-wars-bluff.herokuapp.com" />
</widget>

最佳答案

我解决了我的问题。当我试图打开 url myserverheroku:3000 时，出现了 404。我将手机与 phonegap 连接到 1.1.1.1:3000 这样的 ip，所以当我尝试连接到套接字服务器时，phonegap 添加端口 3000。

我的解决方案是替换:

var socket = io.connect('http://star-wars-bluff.herokuapp.com');

通过

var socket = io.connect('http://star-wars-bluff.herokuapp.com:80');

但是现在，socket.io 不能很好地工作，可能是因为 angularjs。在 destop 中，一切正常，但在移动设备上却不行。

应用程序.js

var swb = angular.module('swb', ['ngRoute', 'swb.controllers']);

swb.config(['$routeProvider', function ($routeProvider) {
    $routeProvider.when('/init', {templateUrl: 'partials/init.html', controller: 'InitCtrl'});
    $routeProvider.when('/welcome', {templateUrl: 'partials/welcome.html', controller: 'WelcomeCtrl'});
    $routeProvider.otherwise({redirectTo: '/init'});
}]);

Controller .js

angular.module('swb.controllers', ['btford.socket-io']).
factory('socket', function (socketFactory) {
  return socketFactory({
    ioSocket: io.connect('http://star-wars-bluff.herokuapp.com:80')
  });
})
.controller('MainCtrl', ['$scope', '$rootScope', '$window', '$location', 'socket', function ($scope, $rootScope, $window, $location, socket) {
    $rootScope.chat = [];
    $rootScope.players = [];
    $rootScope.player = {};
    $rootScope.slide = '';

    $rootScope.back = function() {
      $rootScope.slide = 'slide-right';
      $window.history.back();
    }

    $rootScope.go = function(path){
      $rootScope.slide = 'slide-left';
      $location.url(path);
    }

    socket.on('connected', function (data) {
        $rootScope.players = data.players;
        if(data.player)
            $rootScope.player = angular.copy(data.player);
        $rootScope.chat.push(data.message);
    });
    socket.on('disconnected', function (data) {
        $rootScope.players = data.players;
        $rootScope.chat.push(data.message);
    });
}])
.controller('InitCtrl', ['$scope', '$rootScope', 'socket', function ($scope, $rootScope, socket) {
    $scope.createPlayer = function(){
        socket.emit('adduser', $rootScope.player);
        $rootScope.go('/welcome');
    };
}])
.controller('WelcomeCtrl', ['$scope', '$rootScope', 'socket', function ($scope, $rootScope, socket) {

}]);

index.html:

<!DOCTYPE html>
<html ng-app="swb">
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="msapplication-tap-highlight" content="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" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <title>Star Wars Bluff</title>
    </head>
    <body ng-controller="MainCtrl">
        <div class="jumbotron text-center">
            <h1>Star Wars Bluff</h1>
        </div>
        <div ng-view ng-class="slide"></div>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular-route.js"></script>
        <script src="http://star-wars-bluff.herokuapp.com/socket.io/socket.io.js"></script>
        <script type="text/javascript" src="js/cordova.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/controllers.js"></script>
        <script type="text/javascript" src="js/socket.js"></script>
    </body>
</html>

初始化.html

<h2>Bienvenue sur Star Wars Bluff</h2>
<form name="addPlayer" ng-submit="addPlayer.$valid && createPlayer()" novalidate>
    <input placeholder="Votre nom" type="text" ng-model="player.name" required>
    <button type="submit">Jouer</button>
</form>

欢迎.js

<h2>Liste des joueurs</h2>
<ul>
    <li ng-repeat="connectedPlayer in players"><span ng-class="{you: player.id==connectedPlayer.id}">{{player.id}} {{connectedPlayer.id}} {{ connectedPlayer.name }}</span></li>
</ul>
<h2>Infos</h2>
<ul>
    <li ng-repeat="info in chat | limitTo: -5">{{ info }}</li>
</ul>

服务器.js

// init server
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
    res.sendfile('index.html');
});

http.listen(process.env.PORT || 3000);

// usefull functions
var removeByAttr = function(arr, attr, value){
    var i = arr.length;
    while(i--){
       if( arr[i] 
           && arr[i].hasOwnProperty(attr) 
           && (arguments.length > 2 && arr[i][attr] === value ) ){ 

           arr.splice(i,1);

       }
    }
    return arr;
}

// games data & functions
var types = [...];

var cards = [...];

var playersPerRoom = 6,
    players = [],
    rooms = [];

var gameReady = false;

var currentPlayer,
    currentCard,
    currentOpponent,
    currentType;

io.sockets.on('connection', function (socket) {
    socket.on('adduser', function(data){
        socket.player = data;
        if(rooms.length < 1){
            socket.room = 'room1';
            rooms.push(socket.room);
        }else{
            var roomNumber = Math.ceil((players.length + 1) / playersPerRoom);
            socket.room = 'room' + roomNumber;
            if(rooms.indexOf(socket.room) == -1)
                rooms.push(socket.room);
        }
        socket.player.room = socket.room;
        if(players.length < 1)
            socket.player.id = 1;
        else
            socket.player.id = players[players.length - 1].id + 1;
        players.push(socket.player);
        socket.join(socket.room);
        socket.emit('connected', {message: 'Bienvenue sur le serveur ' + socket.room, players: players, player: socket.player});
        socket.broadcast.to(socket.room).emit('connected', {message: socket.player.name + ' est désormais connecté au serveur ' + socket.room, players: players});
    });
    socket.on('disconnect', function(){
        if(socket.player){
            removeByAttr(players, 'id', socket.player.id);
            socket.broadcast.emit('disconnected', {message: socket.player.name + ' a quitté le serveur ' + socket.room, players: players});
            socket.leave(socket.room);
        }
    });
});

当我连接手机时，在桌面应用程序中，用户列表和聊天会更新，但在另一部手机上它们不会自行更新。

你有什么想法可以解决我的问题吗？

关于android - Phone gap + socket.io + heroku，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28044288/

文章推荐： android - redmi手机android后台服务被杀

文章推荐： mysql - 慢子查询 : group by a groupwise maximum

文章推荐： php - IIS、MS SQL 和 PHP - PHP 中的 SQL 选择不起作用

文章推荐： Erlang 中的 Mysql

c - for (gap = n/2;gap > 0;gap/= 2) 末尾没有 ";"
我在《C 编程语言第二版》中读到了以下代码 /* shellsort: sort v[0] ... v[n-1] into increasing order */ void shellsort(int
gap-system - 如何更改 GAP 中的当前目录？
如何更改GAP中的当前目录？？我写道: gap> ChangeDirectoryCurrent("Users/anymuanalifah/Documents") 然后我收到一个错误。如果重要的话，我
gap-system - 处理列表中的漏洞 [GAP SYSTEM]
我有一个关于列表中漏洞的问题。假设我有以下代码: gap> l:=[2,3,,5]; [ 2, 3,, 5 ] gap> for i in [1..Size(l)] do > Print(l[i],"
gap-system - 从命令行启动 GAP 脚本时如何控制文本格式？
例如，当我从命令行启动脚本时，我想了解 GAP 的行为 $ gap mytest.gap 而不是从 GAP 内部调用它 gap> Read("mytest.gap"); 特别是，我试过 suppres
gap-system - 如何在没有换行符的情况下打印到 GAP 中的文本文件？
最低工作示例: x:=Indeterminate(Rationals,"x"); f:=Sum([1..1000],i->x^i); PrintTo("~/temp.txt",f); 它打印到 tem
android - Phone gap Namespace 'gap' is not bound 错误
我是 phone gap 的新手。我在 config.xml 中遇到错误。实际上我正在做 paypal 集成。在 config.xml 中显示未绑定(bind)电话间隙命名空间。当我运行时显示错误
css - 是否可以为单个装订线覆盖 grid-row-gap/grid-column-gap？
有没有办法将单个 grid-row-gap 设置为不同于网格其余部分的特定大小？用例:网格的第一行到第二行的间隙应该小于网格的其余部分，因为它充当标题。最佳答案 grid-row-gap 和 gr
css - 如果缺少行或列，如何让 CSS row-gap 和 column-gap 不显示？
我有一个包含三个图像和一个文本部分的网格。我有网格的列和行间隙，如果我有所有三个图像，它就可以正常工作。但是，如果缺少任何图像，我仍然会得到缺少的列或行的列或行间隙。如果行或列不存在，是否有任何方法可
sql-server - SQL Server : finding gaps in employment - island and gap problem
上周我一直在尝试解决堆栈溢出问题，但我仍然无法找到可行的解决方案，所以想知道是否有人可以为我提供一些帮助/建议？数据结构说明我有下表: 位置表(zz_position)，用于保存详细信息职位(职位
android - 无法解析 Lcom/work light/android gap/WLDroid Gap 的父类(super class)
当我玩入门练习“在 native Android 应用程序中使用 Worklight API”时，我无法从 native Android 页面连接到 Worklight 服务器，错误消息如下: Una
statistics - Gap 统计的推荐模拟引用数据集数
在计算 Tibshirani 的差距统计量时，引用分布中是否有推荐数量的模拟数据集 (B)？ B=50？ B=100？ B=500？ B=1000？如果是这样，有什么好的引用资料提到它吗？最佳答案
PHP:在数组中填充 'gaps'
我有一个 php 数组(通过表单中的复选框值获得 - 如您所知，复选框仅在未设置时显示在 _POST 变量中)。 Array ( [2] => 0,2 [3] => 0,3 ) 我需要
MYSQL按 "gaps"填充组
我正在尝试通过使用辅助表来填补使用组后的空白，你能帮忙吗？处理没有订单的日子的辅助表 date quantity 2014-01-01 0 2014-01-02 0 2014-01
MYSQL按 "gaps"填充分组
我试图通过使用辅助表来填补使用组后的空白，你能帮忙吗？用于处理无订单天数的辅助表 date quantity 2014-01-01 0 2014-01-02 0 2014-01-0
html - 如何从导航栏和行中删除 "gap"？
你能告诉我如何去除红线和导航栏之间的白色间隙吗？CSS: /* Main */ #menu{ width: 100%; margin: 0; padding: 10px 0 0 0;
javascript - 如何删除水平固定导航栏中列表项之间的 "gaps"
所以我创建了一个导航栏，并且它可以与水平导航一起使用。然而，我在导航栏之间有这些“间隙”，如下图所示，但我仍然可以在这些间隙之间单击。这是 JSFiddle(SCSS 不起作用，所以我使用编译后的
css - 为什么表格中的行折叠时会显示 Gap？
在下面的 jsfiddle 中，我在第 2 行和第 3 行之间有一个空隙，我猜这是由于 CSS，但我不确定它为什么存在以及如何摆脱它。如果我将第二行移到最后一行，间隙就会消失，但我想保持当前的行顺序
javascript - 我的砖石卡中的行之间有 "gaps"
我创建了这个网站: https://jsfiddle.net/1pvk13o8/ 我正在使用 jquery masonry，一切似乎都很好，但有些行之间有空白或空洞，有什么帮助吗？我希望一切都按应有的
sql - 解决连续性的日期范围(GAPS AND ISLANDS)
我有一个如下表，其中 X 列是给定开始和结束期间的商品价格。 X START_DATE END_DATE ------------------------------ 1 0
python - pandas 中是否有一个函数可以在数据帧行中查找某些数据的 "gaps"？
这个问题在这里已经有了答案: pandas or python equivalent of tidyr complete (4 个答案) 关闭 12 个月前。我在寻找 pandas 数据框中的空白

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

android - Phone gap + socket.io + heroku