我有一个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>
答案 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设置的字符串,它工作正常!