Menu
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?
217
To connect Socket.io to the web client, you'll need to download the client JavaScript bundle via CDN or NPM. For HTML clients, add this code within the head tag. The code snippet above downloads Socket.io via CDN and exposes a client bundle at /socket.io/socket.io.js to the client.
Socket.IO can be used based on the Express server just as easily as it can run on a standard Node HTTP server. In this section, we will fire the Express server and ensure that it can talk to the client side via Socket.IO.
After creating the Angular app, we need to install the Socket. IO-Client package which will help us communicate between our front-end and our server.
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);
});
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
