I made a simple app with socket.io and node.js, it is a push notification service.
When a user connects to the websocket, sends his username (and the name of dashboard) and immediately joins to a room named as the user. The application listens for POST request, saves them and then emits a message to the user's room.
io.on('connection', function(socket) {
socket.on('userid', function(data) {
socket.join(data.userid+'-'+data.dashboard);
notification.find({userid: data.userid, to: data.dashboard, received_by_user: false}, function(err, notifs) {
socket.emit('get_notifications', notifs);
}
}
});
app.post('/notify', function(req, res, next) {
var notif_recv = new notification(req.body);
notif_recv.save(function (err, notif_recv) {
io.sockets.in(notif_recv.userid+'-'+notif_recv.dashboard).emit('new_notification', notif_recv);
});
res.send(200);
});
When I test it with node locally, it works fine, I send a POST to /notify and I can see the notification arriving at the dashboard. The problem is, when I test on an AppService on Azure, the client connects to the websocket and receives the first notifications (get_notifications event), but when I POST to /notify, the client doesn't receives anything! (no new_notification event, io.sockets.in(...).emit(...) doesnt seems to work on Azure).
For debugging purposes, I used console.log(...) to log at the server the returned value of functions socket.join(...) and io.sockets.in(...).emit(...), resulting that io.socket.in(...).emit(...) seems to return a io server without any channels and connections!
IIS could be messing with it? I tend to think that IIS have different processes for app.post('/notify'... and io.on('connection'... so, the socket I am referencing on app.post is DIFFERENT from I am joining the user in io.on('connection'.. (socket.join(...)).
Any tip when using socket.io rooms in Azure/IIS?
Thanks!
Did you try adding a 'disconnect' handler for debugging?
io.on('connection', function (socket) {
socket.on('disconnect', function(){ //add this part
console.log('Client disconnected');
});
socket.emit('get_notifications', "get_notifications_:"+new Date());
});
Also log at every emit and receive, so that you know when the client gets disconnected exactly. If its getting disconnected after the get_notifications event, make sure you are not sending a callback to the client or that the client is not expecting a callback from the server.
I notice some missing closing braces for the notification.find(..) and socket.on('userid'..). I hope that is only in the code that you pasted here.
To test the socket.io and POST issue on Azure App Services, I simplify the project and test on Azure.
The test server.js:
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var bodyParser = require('body-parser')
app.use( bodyParser.json() ); // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({ // to support URL-encoded bodies
extended: true
}));
server.listen(process.env.PORT ||3000, function(){
console.log('listening on *:3000');
});
app.get('/', function (req, res) {
res.sendfile(__dirname + '/client.html');
});
app.post('/notify', function(req, res, next) {
io.sockets.emit('new_notification', req.body);
res.send(200);
});
io.on('connection', function (socket) {
socket.emit('get_notifications', "get_notifications_:"+new Date());
});
The client content:
<body>
<script src="/socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$.post("/notify",{
msg:"notification from client"
});
socket.on('get_notifications',function(msg){
console.log(msg);
});
socket.on('new_notification',function(msg){
console.log(msg);
});
</script>
</body>
And this simple project works fine on Azure App Services.
So it could be some other part of your application which raise your issue.
You can check the Diagnostics Logs or leverage Visual Studio Team Services to troubleshooting the issue. Refer to the answer of How to run django manage.py command on Azure App Service for how the enable the Team Services extension on Azure App Services.
Any further concern, please feel free to let me know.
Related
I'm thinking about starting a kind of calendar web app for me to practise and improve my web development skills. I've been designing the structure and technologies to use and finally I decided to use the MEAN stack. I've arrived to a problem: I would like to "auto update" the angular front-end in case new events are added to the calendar ( for example if a new event is added from another tab o even another computer and probably in a future from a smartphone app). How would be the proper way to get this updates? I was thinking about using the "collection.watch()" method from mongodb to detect when the document associated with the account has changed and then socket.io, but , should I do that on the server side or in the client side? And then if I do it on the server side, how do I update the angular view?
Well, I hope I've been clear enough and that I'm not that confused that what I'm planning has no sense.
Thank you!
So basically you are on the right path with your thoughts. You can use socket io for this project. I would suggest you follow the example of the chat app on socket IOs webpage:
Socket IO Chat app
Basically socket io is the server-side technology:
NODEJS:
var app = require('express')();
var http = require('http').createServer(app);
var io = require('socket.io')(http);
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html');
});
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
http.listen(3000, function(){
console.log('listening on *:3000');
});
Which lets the browser connect on a websocket connection to the server. The websocket connection allows for browser to communicate in real-time.
FRONT-END
<script>
$(function () {
var socket = io();
$('form').submit(function(e){
e.preventDefault(); // prevents page reloading
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
});
</script>
I'd strongly recommend using Meteor for this. This type of server -> client updates are exactly what it was designed for. The below example assumes blaze as the rendering engine, but it works just as well with react, vue or angular.
You'd have a server file:
const events = new Mongo.Collection("events");
Meteor.publish("events", function(some, arguments) {
return events.find({some mongo query});
});
on the client side, you'd have some JS code:
const events = new Mongo.Collection("events");
Meteor.subscribe("events", some, arguments);
Template.someTemplate.helpers({
events() {
return events.find();
}
});
and some HTML code:
<template name="someTemplate">
{{#each event in events}}
<!-- do something with the event -->
{{/each}}
</template>
Please excuse any noobiness, I'm learning. :)
I have Socket.IO set up so that I can use io.sockets.emit inside of my routes, and I have that working. There are a few problems.
(SOLVED? SEE EDIT 3) To use, I cannot start with the word socket. I have to start with ioor I get "ReferenceError: socket is not defined." I'd like to be able to use socket.broadcast.emit to emit the event to all clients except for the current user. Right now I'm having to do a check on the client side to not execute the event if it's the current user and it's becoming a real headache as I'm having to emit more events as my project progresses.
(SOLVED, SEE EDIT 1 & 2) I have to run the application with node app.js and restart the server manually every time I make a server-side change. When I run nodemon, I get "Port 3000 is already in use." I feel that this must be related to the following...
(SOLVED, SEE EDIT 2) When pushing to Heroku, I have the port from the code below changed from 3000 to 80 in bin/www and app.js, but it does not work (I can see a 404 error for sockets in the console). If this and #2 are caused by dealing with http/ports in both places, how do I properly set this up and why does node app.js work?
I only need to run Socket.IO on the route shown below (battlefield). Am I already doing this with am I already doing this with require('./routes/battlefield')(io)?
bin/www
var app = require('../app');
var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);
var server = http.createServer(app);
server.listen(port);
app.js
var app = express();
var http = require('http').Server(app);
http.listen(3000);
var io = require('socket.io')(http);
app.set('socketio', io);
var battlefield = require('./routes/battlefield')(io);
battlefield.js
var express = require('express');
var router = express.Router();
var returnRouter = function(io) {
router.get('/', function(req, res, next) {
// other stuff
io.sockets.emit('message', 'This works');
socket.broadcast.emit('message', 'Socket is undefined');
})
return router;
};
module.exports = returnRouter;
I tried wrapping my routes in io.on('connection', function (socket) { to be able to use socket, and instead of 'Socket is undefined,' the event does not occur.
var returnRouter = function(io) {
io.on('connection', function (socket) {
router.get('/', function(req, res, next) {
// other stuff
socket.emit('message', 'This is never emitted');
})
})
return router;
};
I apologize for such a lengthy question. THANK YOU for any help! 💜
EDIT1: Writing out this question helped me understand the problem better. I commented out server.listen(port); in my bin/www and nodemon now works. However, the app crashes on Heroku. My Procfile is web: node ./bin/www... does that need to be changed?
EDIT2: After figuring out Edit1 and a bit of Googling, I found that I can't have server.listen(); (bin/www) and http.listen(3000); (app.js).
In bin/www, I removed server.listen();.
In app.js, for clarity's sake I changed var http = ... to var server = ... and had it listen for process.env.PORT || '3000';, taken from bin/www. I also removed app.set('socketio', io); because it looks like that was doing nothing... I wonder why it was in there.
app.js
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);
var port = process.env.PORT || '3000';
server.listen(port);
This also makes Heroku work because of process.env.PORT, hurray! I'm guessing node app.js worked because I was initializing the app with app.js, I guess bin/www is not executed when you do that?
I still need help with #1 (using socket.broadcast.emit) 😇.
EDIT 3: Well, it took me literally the entire day but I believe I have it figured out with one quirk. Of course I couldn't use socket, it is a parameter given on connect. I also need to access socket across different routes and found this SO question. This is what I ended up doing in battlefield.js:
var returnRouter = function(io) {
var socket;
router.get('/', authenticatedUser, function(req, res, next) {
io.on('connection', function(client){
socket = client;
});
// other stuff
res.render('battlefield', {/* data */});
setTimeout(function(){socket.emit('test', 'It works!')}, 500);
});
router.post('/', function(req, res, next) {
// socket can be accessed
});
return router;
};
module.exports = returnRouter;
(Note: I took out a lot of my own code so I don't know if this is copy and pasteable ready, and you should probably check that socket is not null)
Without setTimeout, socket is undefined on GET '/'. To my understanding, the page must render first... Strange that 200 sometimes doesn't work for me and 500 does. I can leave it at 500, but this is for a game so time is pretty important.
My questions now are:
Can this be improved / is there a way I can do this without setTimeout? Am I 'connecting' clients properly with this code and am I (question #4 up there^) using Socket.IO efficiently?
P.S. If no one answers ^ these questions, I'll edit this, answer the question, and accept my answer as best answer.
When you use sockets when doing routing in Node its not that useful.
When ever you navigate to a different name space (eg www.example.com --> www.example.com/some-name-space) your front end variables are deleted and you need to resend them. This works great if you pass an object along with the GET request for that name space. But it doesn't need sockets.
Its done like this on your router file
var canAlsoBePassed = {some: "things"};
router.get('/', function(req, res, next) {
res.render('index', { items: "Can be passed directly", variables: canAlsoBePassed });
});
For sockets the best kind of applications are for single page apps or to replace AJAX requests. Another great thing sockets allows is for the server to be able to push information without the client asking for it.
To answer your question about SetTimeout, no you dont need this.
Make sure the socket script running on your client side is waiting for the document to be loaded.
$(document).ready(function() {
When an io.on('connection' event fires on your server side you know you have a new client to serve.
emit an event from the server side something like a welcome event that makes the client join a specific room. Once you have them in that room you can be listening for any events emitted to that room.
See socket.io official info
Custom namespaces
To set up a custom namespace, you can call the of function on the server-side:
var nsp = io.of('/my-namespace');
nsp.on('connection', function(socket){
console.log('someone connected'):
});
nsp.emit('hi', 'everyone!');
On the client side, you tell Socket.IO client to connect to that namespace:
var socket = io('/my-namespace');
Might not be the most accurate answer to your questions but I hope it pushes you in the right direction.
I am working on project that involves real time temperatures and have a device sending temps via get that is routed through the server and emitted to the socket. Then I want the server to connect to the original socket and emit the data to a new one that is being read by my client.
Here is my app.js
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
server.listen(8080);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.route('/:temp')
.get(function (req, res){
var temp = req.params.temp;
res.end(temp);
io.sockets.on('connection', function(socket){
socket.emit('send temp', temp);
});
});
io.sockets.on('connection', function(socket){
socket.on('send temp', function(data){
console.log('connected to send temp');//this never shows in the console
io.sockets.emit('new temp', data);
});
});
The route code in app.js works fine. When I hit localhost:3000/test and change the client to connect to 'send temp' (rather then 'new temp') 'test' is output.
Here is the relevant section of my client
var socket = io.connect();
var $temp = $('#temp');
socket.on('new temp', function(data){
$temp.html("Temp: " + "<br/>"+data);
});
I am running node version 4.1.2, socket 1.3.7 and express 4.10.8.
I am wondering why I cannot connect to the original socket a second time. Or that may not even be my problem. I have studied the many 'chat' tutorials and searched for others using trying to do what I want to without any success.
Ultimately what I am trying to have happen is have a client hit /:temp over and over with a real-time reading and then have other clients get that data in real-time.
This is all still a little new to me so any help is appreciated.
Your code example registers a message handler on the server for the 'send temp' message. The client registers a message handler for the 'new temp' message.
The two (client and server) are then sitting there in a stalemate waiting for someone to first send a message, but (per the code you've disclosed) nobody ever does.
I don't really understand what the intent is for your code, but I see several issues.
First off, you do not want to install a listener for the connection event inside this code:
app.route('/:temp')
.get(function (req, res){
var temp = req.params.temp;
res.end(temp);
io.sockets.on('connection', function(socket){
socket.emit('send temp', temp);
});
});
Why would you only start listening for a connection event when you get a particular route handler. And, why add yet another event handler every time that route is hit. This code is just completely wrong. I don't know what you thought you were trying to achieve with it, but it's not the way to do things.
Second off, this code is waiting for the client to send a 'send temp' message and when it gets one, it attempts to broadcast that to all clients. But, the part of your client you disclose never sends a 'send temp' message.
io.sockets.on('connection', function(socket){
socket.on('send temp', function(data){
console.log('connected to send temp');//this never shows in the console
io.sockets.emit('new temp', data);
});
});
Third off, please describe exactly what you're trying to accomplish in words so we can better know what code to recommend in order to do that.
EDIT
Now that you've described the actual problem here:
Ultimately what I am trying to have happen is have a client hit /:temp
over and over with a real-time reading and then have other clients get
that data in real-time.
It is a little easier to recommend a solution:
On the server:
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server);
server.listen(8080);
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
app.get('/:temp', function (req, res) {
var temp = req.params.temp;
res.end(temp);
// send this temperature to all connected clients
io.emit('new temp', temp);
});
On the client:
var socket = io.connect();
var $temp = $('#temp');
socket.on('new temp', function(data){
$temp.html("Temp: " + "<br/>"+data);
});
I want to build a NodeJS API so that when I hit an endpoint, the app will trigger an event that will cause its unique socket connection to emit a message to its listeners. I have built a solution before using Python/Django, Redis, and NodeJS/Socket.io with Django as the API and Redis as the 'event trigger', but I would like to consolidate the different technologies into NodeJS and Socket.io.
I tried moving the socket.emit() code into different modules and then app.use()'d those modules, but the code broke because it didn't have an instance of the socket.
I also know that you can broadcast to all socket connections inside on an endpoint, for example:
app.use('socket.io/help', function(req, res) {
console.log(req.query);
io.sockets.emit('help_message', 'You should help me.');
res.send('help msg sent');
});
But I am looking for a way that allows a client (that doesn't have a socket connection) to hit an endpoint and pass a query param that tells NodeJS which of its connected sockets to send a message to.
Is this possible? Or am I trying to fight the framework? e.g., is there a different way of doing this with different JS WebSocket frameworks/technologies?
I have been stuck on same situation but resolved easily
you have created socket on app.js
server = require('http').createServer(app),
io = require('socket.io').listen(server);
server.listen(port);
global.socketIO = io;
Now you can call this io instance to your any controller like
app.use('socket.io/help', function(req, res) {
console.log(req.query);
var io = global.socketIO;
// UID IS THE VARIABLE
io.sockets.emit('help_message'+UID, 'You should help me.');
res.send('help msg sent');
});
CLIENT SIDE
<script src="/socket.io/socket.io.js"></script>
<script>
window.socket.on("help_message_<%-UID%>", function(msg){
//// ACTION
});
You can join a room with the specific sockets you want to recieve the messages on.
see Rooms & Namespaces in the socket.io documentation
join a chan on your helpdesk conenctions:
io.on('connection', function(socket){
socket.join('helpdesk');
});
and broadcast to them:
app.use('socket.io/help', function(req, res) {
console.log(req.query);
var io = global.socketIO;
io.sockets.emit('adduser', req.body.uid);
io.to('helpdesk').emit('some event'):
res.send('help msg sent');
});
I have problem with creating Azure Mobile Services Custom Script, I want to use Socket.IO Node.js module, but I don't know how to edit Azure Mobile Services route to be able to access /socket.io/1
After execution this code socket.io is started but client is not able to access URL endpoint from browser, please help me, thank you in advance, my email is: stepanic.matija#gmail.com
My code is:
in /api/notify
exports.register = function (api) {
api.get('socket.io',getSocketIO);
};
function getSocketIO(req,res)
{
var app = require('express')()
, server = require('http').createServer(app)
, io = require('socket.io').listen(server);
server.listen(80);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function (socket) {
socket.emit('news', { hello: 'world' });
socket.on('my other event', function (data) {
console.log(data);
});
});
res.send(statusCodes.OK, { message : '23 Hello World!', bla: 'bla2' });
}
Support for Socket.IO has been added using startup script extension
var path = require('path');
exports.startup = function (context, done) {
var io = require('socket.io')(context.app.server);
io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});
});
context.app.get('/public/chat.html', function(req, res) {
res.sendfile(path.resolve(__dirname, '../public/chat.html'));
});
done();
}
For details see: http://azure.microsoft.com/blog/2014/08/26/how-to-use-socket-io-with-azure-mobile-service-node-backend/
Socket.io is not currently supported.
In may be possible to get it working, but you would need to do this code inside of your mobile services startup script, http://blogs.msdn.com/b/azuremobile/archive/2014/01/14/new-startup-scripts-preview-feature-in-azure-mobile-services.aspx, using the App object provided there.
You'd also need to update the routes on it so your routes are picked up before the mobile service ones.
#stepanic, you might try bundling the Socket.io client as a static file. Here's how we do it in Sails for reference:
From the docs:
<!-- .... -->
</body>
<script type="text/javascript" src="./path/to/bower_components/sails.io.js"></script>
<script type="text/javascript">
// `io` is available as a global.
// `io.socket` will connect automatically, but it is not ready yet (think of $(document).ready() from jQuery).
// Fortunately, this library provides an abstraction to avoid this issue.
// Requests you make before `io` is ready will be queued and replayed automatically when the socket connects.
// To disable this behavior or configure other things, you can set properties on `io`.
// You have one cycle of the event loop to change `io` settings before the auto-connection behavior starts.
io.socket.get('/hello', function serverResponded (body, sailsResponseObject) {
// body === sailsResponseObject.body
console.log('Sails responded with: ', body);
console.log('with headers: ', sailsResponseObject.headers);
console.log('and with status code: ', sailsResponseObject.statusCode);
});
</script>
</html>