Socket.io + Express + Node + Angular通知 [英] Socket.io + Express + Node + Angular notifications
问题描述
尽管如此，我似乎无法让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。 b console.log（Socket.io is GO）;
socket.on（'add customer'，function（customer）{
console.log（Customer added，customer ）;
}）
socket.on（'notification'，function（data）{
console.log（QUEUE中的新客户，数据）;
}）;
}）;
我似乎无法让它在我的服务器上运行，当DID运行时没有显示任何我在那里的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-客户'，功能（客户）{
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>请输入您的姓名：< / label>
< input ng-model =currentCustomer.name/>
< button ng-click =join（）>加入< / button>
< br />
< h1>新客户：< / h1>
< ul>
< li ng-repeat =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）;
};
套接字.on（'notification'，function（data）{
$ scope。$ apply（function（）{
$ scope.newCustomers.push（data.customer）;
}）;
}）;
}）;
I have an app where I'm trying to make a queue system for customers. I am trying to make it so that when a customer joins the queue, it notifies the store employees of the join and let's them know to get on it and help the customer as soon as possible.
I can't seem to get Socket IO to talk with my front end at all, though.
Here's the code I have, and I can't even get Node to recognize Socket as a library. I've followed 3 different tutorials, and tried them all, but I can't see what's being done wrong in my server code.
Here's what I'm doing in my server that's related to 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);
});
});
I can't seem to get it to run in my server, and when it DID run, it didn't show any of the socket.on events that I had in there and it wouldn't console.log anything.
What am I doing wrong? Has anyone successfully gotten Socket to play nicely with Express and Angular together?
Looks like your code is incomplete or maybe you didn't implement well.
I created an example using angular.js, express, and socket.io trying to replicate your requirement.
This is my server, 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');
});
Then I created a public folder with the following files:
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);
});
});
});
这篇关于Socket.io + Express + Node + Angular通知的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
