手机差距+ socket.io + heroku

时间:2015-01-20 11:30:42

标签: android cordova heroku socket.io

我有一个appli,它调用heroku上托管的socket.io服务器。 当我使用命令" phonegap serve"在我的手机(android)上启动我的应用程序时我有这个错误:

  

[phonegap]网址代理错误:myserverheroku:3000 / socket .io /?EIO = 3& transport = polling& t = 1421696372422-2 undefined [phonegap]   ECONNREFUSED myserverheroku:3000 / socket.io /?EIO   = 3及运输=轮询& 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>

3 个答案:

答案 0 :(得分:1)

我解决了我的问题。 当我试图打开url myserverheroku:3000我有一个404。 我在ip.1.1.1:3000上连接我的手机和phonegap,所以当我尝试连接到socket服务器时,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中,一切正常,但手机上没有。

app.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'});
}]);

controllers.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>

init.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>

welcome.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>

server.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);
        }
    });
});

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

您有什么想法来解决我的问题吗?

答案 1 :(得分:0)

升级到phonegap时遇到了同样的问题~4.2 ...降级到旧版本解决了问题。这似乎是一个手机错误。

尝试降级到e。 G。 phonegap@3.5.0-0.20.10

npm install -g phonegap@3.5.0-0.20.10

答案 2 :(得分:0)

最后我使用utf8模块为节点编码用socket.io设置的字符串,它工作正常!