web-dev-qa-db-ja.com

Socket.io + Express + Node + Angular通知

私は顧客のためにキューシステムを作ろうとしているアプリを持っています。お客様がキューに参加すると、店員に参加を通知し、できるだけ早く参加してお客様をサポ​​ートできるようにしようとしています。

ただし、Socket IOがフロントエンドと通信することはまったくできないようです。

これが私が持っているコードです、そして私はソケットをライブラリとして認識するためにNodeを取得することさえできません。私は3つの異なるチュートリアルに従ってそれらすべてを試しました、しかし私は何が何であるかを見ることができません私のサーバーコードで間違って行われています。

これが、Socket.ioに関連するサーバーで行っていることです。

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


io.on('connection', function(socket){

    socket.emit('connection', "Connection created.")
    console.log("Socket.io is GO");

    socket.on('add customer', function(customer){
        console.log("Customer added", customer); 

    })

    socket.on('notification', function(data) {
        console.log("NEW CUSTOMER IN THE QUEUE", data);
    });

});

サーバーで実行することができないようです。DID実行すると、そこにあるsocket.onイベントが表示されず、表示されませんでした。 tconsole.log何でも。

私は何が間違っているのですか？誰かがSocketをExpressとAngular一緒にうまくプレイするように成功しましたか？

angularjsnode.jsexpresssocket.io
6
Dylan Lott

コードが不完全であるか、うまく実装されていないようです。

要件を再現するために、angular.js、express、socket.ioを使用して例を作成しました。

これは私のサーバーです、app.js：

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

app.use(express.static(__dirname + '/public'));

io.on('connection', function(socket) {
  console.log('new connection');

  socket.on('add-customer', function(customer) {
    io.emit('notification', {
      message: 'new customer',
      customer: customer
    });
  });
});

server.listen(4041, function() {
  console.log('server up and running at 4041 port');
});

次に、次のファイルを使用してパブリックフォルダーを作成しました。

public/index.html

<!doctype>
<html ng-app="sampleApp">
  <head>
  </head>

  <body ng-controller="IndexController">
    <label>Please enter your name: </label>
    <input ng-model="currentCustomer.name"/>
    <button ng-click="join()">Join</button>
    <br/>

    <h1>New Customers: </h1>
    <ul>
      <li ng-repeat="customer in newCustomers">{{customer.name}}</li>
    </ul>

    <script src="https://cdn.socket.io/socket.io-1.3.5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.1/angular-route.js"></script>
    <script src="app.js"></script>
  </body>

</html>

public/app.js

var app = angular.module('sampleApp', ['ngRoute']);

app.config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: '/index.html'
  });
}]);

app.factory('socket', ['$rootScope', function($rootScope) {
  var socket = io.connect();

  return {
    on: function(eventName, callback){
      socket.on(eventName, callback);
    },
    emit: function(eventName, data) {
      socket.emit(eventName, data);
    }
  };
}]);

app.controller('IndexController', function($scope, socket) {
  $scope.newCustomers = [];
  $scope.currentCustomer = {};

  $scope.join = function() {
    socket.emit('add-customer', $scope.currentCustomer);
  };

  socket.on('notification', function(data) {
    $scope.$apply(function () {
      $scope.newCustomers.Push(data.customer);
    });
  });
});
12
Wilson

特定のポートでリッスンするようにsocket.ioサーバーを設定する必要があります。リッスンしないと、クライアントの接続やメッセージの送信を監視できません。これを修正するには、コードを次のように変更する必要があります。

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

//Existing Code

server.listen(1337, function(){
    console.log('listening on *:1337');
});
1
Blubberguy22