angularjs - Socket.io + Express + Node + Angular 通知

标签 angularjs node.js express socket.io

我有一个应用程序,我正在尝试为客户制作一个排队系统。我正在努力做到这一点,以便当客户加入队列时,它会通知商店员工加入并让他们知道加入队列并尽快帮助客户。

不过,我似乎根本无法让 Socket IO 与我的前端对话。

这是我的代码,我什至无法让 Node 将 Socket 识别为一个库。我遵循了 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);
    });

});

我似乎无法让它在我的服务器上运行,当它确实运行时,它没有显示我在那里的任何 socket.on 事件,也不会 console.log 任何内容。

我做错了什么?有没有人成功地让 Socket 与 Express 和 Angular 一起很好地发挥作用?

最佳答案

看起来您的代码不完整,或者您没有很好地实现。

我使用 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);
    });
  });
});

关于angularjs - Socket.io + Express + Node + Angular 通知,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31040770/

相关文章:

javascript - 将必需添加到 Angular 指令

javascript - 使用 mongoose 更新数组

javascript - docker Node : Entrypoint can't be found

node.js - Nodejs 上的多个 setTimeouts

JavaScript/Express Js - app.delete() 路线不起作用

node.js - SPA+API OAuth流程,用什么?

javascript - npm zombie 将<head>内容放入<body>中

angularjs - 将 $http 与 google 建议一起使用 - 从 angularjs 版本 1.3.15 转换为版本 1.6.4

javascript - $q 对 foreach 的 promise

mysql - Nodejs 从表中删除但选择不起作用