Angular socket.io 无法连接

Question

我对 node 和 socket.io 还很陌生，所以请耐心等待。

我有一个在本地运行的小型服务器（只是想看看它是如何工作的）：

"use strict";
var express = require('express');
var app     = express();
var server  = require('http').Server(app);
var io      = require('socket.io')(server);
io.on('connection', function(socket) {
  console.log('connected!');
  socket.on('add-customer', function(customer) {
    io.emit('notification', {
      message: 'new customer',
      customer: customer
    });
  });
  socket.on('disconnect', function() {
    console.log('user disconnected');
  });
});
server.listen(9000, function() {
  console.log('server up and running at 9000 port');
});

我有一个带有套接字模块angular-socket-io的离子应用程序（使用角度）：

MyApp.factory('socket', function (socketFactory) {
    return socketFactory({
        ioSocket: io.connect('http://localhost') 
        //also tried to specify the port: localhost:9000
    });
});

在我的控制器中，我只想向服务器发送一条消息，但控制台中除了之外什么都没有显示server up and running at 9000 port:

MyApp.controller('MainCtrl', function($scope, socket){
    $scope.users = [];
    socket.emit('add-customer', {test:'test'});
    socket.on('add-customer', {test:'test'}); // Desperation
    $scope.$on('$destroy', function (event) {
        socket.removeAllListeners();
    });
});

我已经尝试了所有教程并不断来回......

如果有帮助，我的 ionic 应用程序将在端口 8100 上提供服务。

我错过了什么？

P.S：我似乎没有看到任何连接尝试（见控制台截图）

Answer 1

如果您尝试建立 socket.io 连接的网页位于端口 8100 上，并且您尝试建立与端口 9000 的 socket.io 连接，则这是一个跨域请求，浏览器将除非您在 socket.io 服务器上使用 CORS 启用它，否则不允许这样做。

如果您查看浏览器调试控制台，您可能会看到有关跨源连接被拒绝访问的错误。

您需要让您的 socket.io 服务器来自您的网页所在的同一台服务器，并相应地调整客户端连接，或者您需要在您的 socket.io 服务器上启用来自所需来源的 COR .

"use strict";
var express = require('express');
var app     = express();
var server  = require('http').Server(app);

// allow the ionic page from port 8100 to connect to this server
// using CORS
var opts = {origins: "http://yourhostname:8100"};

var io = require('socket.io')(server, opts);
io.on('connection', function(socket) {
  console.log('connected!');
  socket.on('add-customer', function(customer) {
    io.emit('notification', {
      message: 'new customer',
      customer: customer
    });
  });
  socket.on('disconnect', function() {
    console.log('user disconnected');
  });
});
server.listen(9000, function() {
  console.log('server up and running at 9000 port');
});

Answer 2

我的问题的解决方案是避免使用角度模块并使用原生：

MyApp.factory('socket', function ($rootScope) {
    var socket = io.connect('http://localhost:9000');
    return {
        on: function (eventName, callback) {
            socket.on(eventName, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    callback.apply(socket, args);
                });
            });
        },
        emit: function (eventName, data, callback) {
            socket.emit(eventName, data, function () {
                var args = arguments;
                $rootScope.$apply(function () {
                    if (callback) {
                        callback.apply(socket, args);
                    }
                });
            })
        }
    };
});

然后在控制器中使用对象：

MyApp.controller('MainCtrl', function($scope, socket){
    $scope.users = [];
    socket.emit('connection'); });
...

和服务器端：

"use strict";
var express = require('express');
var app     = express();
var server  = require('http').Server(app);
var io = require('socket.io')(server);
io.on('connection', function(socket) {
  console.log('connected!');
  socket.on('disconnect', function() {
    console.log('user disconnected');
  });
});
server.listen(9000, function() {
  console.log('server up and running at 9000 port');
});