Client can not see updated data when connects to server application - javascript

I'm using node.js to read data from socket on my web application (server). I receive data and make some changes on webpage (ex: change the color of polyline) but when a client after that changes connects, cannot see the changed color unless a new data is sent to server! So how client can see the previous changes which were on server?
here is my code
app.js
var http = require('http');
var express = require('express'),
app = module.exports.app = express();
var server = http.createServer(app);
var io = require('socket.io').listen(server); //pass a http.Server instance
server.listen(3000); //listen on port 80
app.use(express.static('public'));
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html');
});
//var app = require('http').createServer(handler);
//var io = require('socket.io').listen(app);
var fs = require('fs');
var mySocket = 0;
//app.listen(3000); //Which port are we going to listen to?
function handler (req, res) {
fs.readFile(__dirname + '/index.html', //Load and display outputs to the index.html file
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.sockets.on('connection', function (socket) {
console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage
mySocket = socket;
});
//UDP server on 41181
var dgram = require("dgram");
var server = dgram.createSocket("udp4");
server.on("message", function (msg, rinfo) {
console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging
if (mySocket != 0) {
mySocket.emit('field', "" + msg);
mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage
}
});
server.on("listening", function () {
var address = server.address(); //IPAddress of the server
console.log("UDP server listening to " + address.address + ":" + address.port);
});
server.bind(41181);
index.html
<html>
<script src="/socket.io/socket.io.js"></script>
<script>
var socket = io.connect('http://192.168.1.14:3000');
socket.on('field', function (data) {
console.log(data);
$("#field").html(data);
switch(data)
{
case "1":
$("#path1").css("stroke", "red");
$("#progress1").css("backgroundColor", "red");
break;
}
});
</script>
<body>
<polyline id="path1" points="600,270 560,262 460,270 440,300" style="fill:none;stroke:green;stroke-width:3" />
</body>
</html>

On connection you have to emit already existing changes to socket client.
var myMessage;
io.sockets.on('connection', function (socket) {
console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage
mySocket = socket;
mySocket.emit('field', "" + myMessage); // <<-- like this
server.on("message", function (msg, rinfo) {
console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging
if (mySocket != 0) {
myMessage = msg;
mySocket.emit('field', "" + msg);
mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage
}
});
});

Related

data received from c# to localhost is not shown in localhost webpage - nodemon app crashed

I'm trying to pass data from c# using console application to webpage using socket.io in real time
here is my c# code:
static void Main(string[] args)
{
int i = 0;
while(true)
{
//String data = Console.ReadLine();
String data = i.ToString();
if(data.Equals("exit", StringComparison.OrdinalIgnoreCase)) break; //If the user types "exit" then quit the program
SendData("127.0.0.1", 41181, data); //Send data to that host address, on that port, with this 'data' to be sent
//Note the 41181 port is the same as the one we used in server.bind() in the Javascript file.
System.Threading.Thread.Sleep(50); //Sleep for 50ms
i++;
}
}
public static void SendData(string host, int destPort, string data)
{
IPAddress dest = Dns.GetHostAddresses(host)[0]; //Get the destination IP Address
IPEndPoint ePoint = new IPEndPoint(dest, destPort);
byte[] outBuffer = Encoding.ASCII.GetBytes(data); //Convert the data to a byte array
Socket mySocket = new Socket(AddressFamily.InterNetwork, SocketType.Dgram, ProtocolType.Udp); //Create a socket using the same protocols as in the Javascript file (Dgram and Udp)
mySocket.SendTo(outBuffer, ePoint); //Send the data to the socket
mySocket.Close(); //Socket use over, time to close it
}
this is app.js
var app = require('http').createServer(handler);
var io = require('socket.io').listen(app);
var fs = require('fs');
var mySocket = 0;
app.listen(3000); //Which port are we going to listen to?
function handler (req, res) {
fs.readFile(__dirname + '/index.html', //Load and display outputs to the index.html file
function (err, data) {
if (err) {
res.writeHead(500);
return res.end('Error loading index.html');
}
res.writeHead(200);
res.end(data);
});
}
io.on('connection', function (socket) {
console.log('Webpage connected'); //Confirmation that the socket has connection to the webpage
mySocket = socket;
});
//UDP server on 41181
var dgram = require("dgram");
var server = dgram.createSocket("udp4");
server.on("message", function (msg, rinfo) {
console.log("Broadcasting Message: " + msg); //Display the message coming from the terminal to the command line for debugging
if (mySocket != 0) {
mySocket.emit('field', "" + msg);
mySocket.broadcast.emit('field', "" + msg); //Display the message from the terminal to the webpage
}
});
server.on("listening", function () {
var address = server.address(); //IPAddress of the server
console.log("UDP server listening to " + address.address + ":" + address.port);
});
server.bind(41181);
finally this is index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
</head>
<body>
<script>
var socket = io();
socket.on('field', function (data) {
$("#field").html(data);
});
</script>
Data from C#: <div id="field"></div>
</body>
</html>
I used this article to implement it, everything, seems work fine for example when I send data to console of node.js it display it but as soon as I run the page (localhost:3000) after several printing "webpage connected" it shows this error in my console:
nodemon app crashed - waiting for file changes
can someone give me a solution?
this my result picture
Error may occure on a different levels. I see that you are not listenning socket errors, both for server and io.
Both of them are based on EventEmiter approach, so both have error event to listen.
Try to listen all possible error places, this will give you additional infromation on why your app crashed.
server.on("error", err => console.error("server error occured", err));
io.on("error", err => console.error("io error occured", err));
Update
Replace in index.html script loading for socket.io with this.
<script src="/socket.io/socket.io.js"></script>.
Then, all re-connection issues should gone. I'm not pretty sure how it is working.

426 Status: WebSockets with Node.js

Im currently switching my application from using Socket.io to HTML5 WebSockets. I'm assuming that my problem lies within the first couple lines of both the client and server. My browser keeps on replying with a 426 (Upgrade Required) status when I test my app on localhost. Please shed some light on my problem...
Server Code
"use strict";
var session = require('./chat-session'),
serveStatic = require('serve-static'),
server = require('http').createServer(),
WebSocketServer = require('ws').Server,
wss = new WebSocketServer({server: server, port: 8181}),
express = require('express'),
app = express();
// Sockets with real-time data
// io = require('socket.io').listen(server),
// mongoose = require('mongoose');
app.use(express.static(__dirname + '/public')); // used for external files on client
let storage = session.default; // cache object for storage
// Routing refers to determining how an application responds to a client request to a particular endpoint
app.get('/', function(req, res){
res.sendFile(__dirname + '/public/index.html');
});
wss.on('connection', function(client){
client.on('join', (name) => {
client.nickname = name;
// check to see if nickname has been taken, if so, give random name
if(storage.users.indexOf(client.nickname) !== -1) {client.nickname = randomName();}
// tell all chatters that a new user has entered the room
client.broadcast.emit("enter", "* " + client.nickname + " * has connected");
storage.users.forEach((user) => {
client.emit('add chatter', user);
});
client.broadcast.emit('add chatter', client.nickname);
storage.channels.general.messages.forEach((message) => {
client.emit("message", message.name + ": " + message.data, 'general');
});
storage.users.push(client.nickname);
});
client.on('message', (message, room) => {
var nickname = client.nickname;
client.broadcast.emit("message", nickname + ": " + message, room);
client.emit("me", message); // send message to self
storeMessage(nickname, message, room); // store the message in chat-session
console.log(nickname + ' said: ' + message + " in room " + room);
});
// When client switches between tabs (rooms)
client.on('switch', (room) => {
storage.channels[room].messages.forEach((message) => {
if (message.name === client.nickname) {
client.emit("me", message.data, room);
} else {
client.emit("message", message.name + ": " + message.data, room);
}
});
});
// client.on('disconnect', () => {
// client.emit('disconnect', "client")
// });
});
//const PORT = 8080;
//server.listen(PORT);
Client Code
// var server = io.connect("http://localhost:8080"); // connect to server
var server = new WebSocketServer("ws://localhost:8181");
var curRoom = $('.nav .active').attr('id'); // cache current room
server.on('connect', function(data){
nickname = prompt("What is your nickname?");
//while(nickname) TODO:make sure client cannot choose null
server.emit('join', nickname); // notify the server of the users nickname
});
//server.on('disconnect', function(data){
// server.emit('disconnect');
//});
// new chatter enters room
server.on('enter', function(data){
$('#messages').append($('<li style="background:#33cc33; color:white">').text(data));
});
// connected users section
server.on('add chatter', function(name){
var chatter = $('<li style="color:white; font-size:22px">' + name + '</li>').data('name', name);
$('#users').append(chatter);
});
// users' send message
server.on('message', function(message, room){
// only emit message to other users if they are in same channel
if (curRoom === room) {
$('#messages').append($('<li style="display:table; box-shadow: 6px 3px 8px grey;">').text(message));
play(); // invoke function to play sound to other clients
console.log('sound played here');
}
});
// differentiate how the client sees their message
server.on('me', function(message){
$('#messages').append($('<li style="background:#0066ff; color:white; display:table; box-shadow: 6px 3px 8px grey;">').text(message));
});
// Client submits message
$('#chat_form').submit(function(e){
var message = $("#chat_input").val();
server.emit('message', message, curRoom);
$('#chat_input').val(''); // Make input box blank for new message
return false; // prevents refresh of page after submit
});
Http 426 means that you are trying to connect unsupported web-socket version .
You can check in the client headers for supported version .
Refer to RFC for more detail
https://www.rfc-editor.org/rfc/rfc6455#section-4.2.2

node.js +socket.io is not working on heroku

Following part of my code is used for retrieving the data from TI sensor tag. So we are using sensortag node.js module to get the data and sending it to client using socket.io. on local host the application is working fine but , when i push the code to heroku cloud web sockets part is not working.
Error : the server responded with a status of 400 (Bad Request)
https://peaceful-plateau-6281.herokuapp.com/socket.io/?EIO=3&transport=polling&t=1449192192332-3 400 (Bad Request)
Following is my code :
var express = require('express');
var port = process.env.PORT || 3000;
var app = module.exports.app = express();
var server = require('http').Server(app);
//var io = require('socket.io')(server);
var SensorTag = require('sensortag');
var path = require('path');
var io = require('socket.io').listen(server.listen(port,function(){
console.log("We have started our server on port " + server.address().port);
// SensorTag.discover(function(tag) { and close it with }); above ondiscover mthod
function onDiscover(tag){
tag.on('disconnect', function() {
console.log('disconnected!');
process.exit(0);
});
function connectAndSetUpMe() { // attempt to connect to the tag
console.log('connectAndSetUp' + tag.id);
tag.connectAndSetUp(enableDataPoints); // when you connect, call enableIrTempMe
}
function enableDataPoints(){
console.log('enabling Temp datapoint');
tag.enableIrTemperature(notifyMe);
tag.enableHumidity(notifyHumd);
tag.enableBarometricPressure(notifyPress);
tag.enableAccelerometer(notifyAccel);
}
function notifyMe(){
console.log("notifying temp datapoints");
tag.notifyIrTemperature(listenForReading);
}
function notifyHumd(){
console.log("notifying humd datapoints");
tag.notifyHumidity(listenForHumdReading);
}
function notifyPress(){
console.log("notify pressure");
tag.notifyBarometricPressure(listenForPress);
}
function notifyAccel(){
console.log("notify Accerlerometer");
tag.notifyAccelerometer(listenForAcc);
}
function listenForReading(){
tag.on('irTemperatureChange', function(objectTemp, ambientTemp) {
console.log('\tObject Temp = %d deg. C', objectTemp.toFixed(1));
function TempChange() {
io.sockets.emit('objTemp', { sensorId:tag.id, objTemp: objectTemp, ambTemp: ambientTemp});
};
TempChange();
});
}
connectAndSetUpMe();
}
SensorTag.discover(onDiscover);
})
);
io.on('connection', function () {
io.set("transports", ["xhr-polling"]);
io.set("polling duration", 10);
});
And at the client side
<head>
<script src='/socket.io/socket.io.js'></script>
<script>
<script>
var socket = io.connect("\/\/"+window.location.hostname+":"+location.port);
//var socket = io.connect(window.location.hostname);
console.log("window.location.hostname"+location.port);
socket.on('objTemp', function(data) {
$('#objTemp').html(parseInt(data.objTemp));
console.log("This is my places");
$('#ambTemp').html(parseInt(data.ambTemp));
</script>
</head>
<body>
<p id="objTemp"></p>
</body>
</html>
I am not getting the data at the client side through websockets.Can anybody please help me out.
Thanks&regards,
Shivadeepthi
I had the same error and just fixed.
var io = require('socket.io').listen(server);
io.set('origins', '*:*');
io.set('match origin protocol', true);

Socket.io (1.x) .to(room) not working, but works without

I'm building a simple messaging server and it works perfect using the socket.broadcast.emit() however if you use the socket.broadcast.in(room).emit() it dose not connect up. I've include the server code and client code below.
server
var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var Parse = require('parse').Parse;
var room;
app.get('/', function(req, res){
res.sendfile('index.html');
});
// When a new connection is launched
io.on('connection', function(socket){
console.log('user connected: '+socket.id);
//========== INIT connection =========
// once a client has connected, we expect to get a ping from them saying what room
// they want to join
socket.on('room', function(data) {
room = data;
socket.join(room);
console.log(' + User: '+socket.id+' - joined Room: ['+room+']');
console.log(' + User: '+socket.id+' - has Rooms: ['+socket.rooms+']');
// Display all sockets connected to room
inRoom(room);
});
//======== Delegates messages ========
socket.on('message_send', function(data){
var JSONdata = JSON.parse(data);
var room_l = JSONdata.chat_id;
var msg = JSONdata.message;
console.log('Room: ' + room_l + ' - Message: ' + msg);
// Send message
//io.emit('message_received', msg);
//socket.broadcast.emit('message_received', msg);
io.in('TZRfM7V5HH').emit('message_recieved', msg);
//io.to(room_l).emit('message_received', msg);
// Save message to parse
parseSAVE(data);
});
});
Client
<script>
var socket = io();
var msg = $('#m').val();
var room = 'TZRfM7V5HH';
$( document ).ready(function() {
socket.emit('room',room);
socket.emit('message_send', '{"chat_id":"'+room+'","message":"yoyoyo shits to hype"}');
});
$('form').submit(function(){
$msg = $('#m').val();
socket.emit('message_send', '{"chat_id":"'+room+'","message":"'+$msg+'"}');
$('#messages').append($('<li>').text($msg));
$('#m').val('');
return false;
});
socket.on('message_received', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
I have been playing around with this all week and I cant seem to figure out whats wrong with my implementation, any help or pointers would be greatly appreciated!

express.session.MemoryStore not returning session?

It was really easy setting up sessions and using them in PHP. But my website needs to deal with WebSockets. I am facing problem to set up sessions in node.js. I can easily push data without using sessions and it would work fine but when more than one tab is opened the new socket.id is created and previously opened tabs won't function properly. So I have been working on sessions and had problem accessing session store, its logging session not grabbed. I have tried with session.load as well but no luck
How do I get session object and use it in a way that opening other tabs wouldn't affect the functionality and push data from server to client on all tabs?
var express=require('express');
var http = require('http');
var io = require('socket.io');
var cookie = require("cookie");
var connect = require("connect"),
MemoryStore = express.session.MemoryStore,
sessionStore = new MemoryStore();
var app = express();
app.configure(function () {
app.use(express.cookieParser());
app.use(express.session({store: sessionStore
, secret: 'secret'
, key: 'express.sid'}));
app.use(function (req, res) {
res.end('<h2>Hello, your session id is ' + req.sessionID + '</h2>');
});
});
server = http.createServer(app);
server.listen(3000);
sio = io.listen(server);
var Session = require('connect').middleware.session.Session;
sio.set('authorization', function (data, accept) {
// check if there's a cookie header
if (data.headers.cookie) {
// if there is, parse the cookie
data.cookie = connect.utils.parseSignedCookies(cookie.parse(data.headers.cookie),'secret');
// note that you will need to use the same key to grad the
// session id, as you specified in the Express setup.
data.sessionID = data.cookie['express.sid'];
sessionStore.get(data.sessionID, function (err, session) {
if (err || !session) {
// if we cannot grab a session, turn down the connection
console.log("session not grabbed");
accept('Error', false);
} else {
// save the session data and accept the connection
console.log("session grabbed");
data.session = session;
accept(null, true);
}
});
} else {
// if there isn't, turn down the connection with a message
// and leave the function.
return accept('No cookie transmitted.', false);
}
// accept the incoming connection
accept(null, true);
});
sio.sockets.on('connection', function (socket) {
console.log('A socket with sessionID ' + socket.handshake.sessionID
+ ' connected!');
});
Take a look at this article: Session-based Authorization with Socket.IO
Your code works fine, but need 2 improvements to do what you want (send session data to clients from server):
it extracts sessionID during authorization only
it extracts session data from store by this sessionID during connection where you can send data from server to clients in an interval.
Here's the improved code:
var express = require('express');
var connect = require('connect');
var cookie = require('cookie');
var sessionStore = new express.session.MemoryStore();
var app = express();
app.use(express.logger('dev'));
app.use(express.cookieParser());
app.use(express.session({store: sessionStore, secret: "secret", key: 'express.sid'}));
// web page
app.use(express.static('public'));
app.get('/', function(req, res) {
var body = '';
if (req.session.views) {
++req.session.views;
} else {
req.session.views = 1;
body += '<p>First time visiting? view this page in several browsers :)</p>';
}
res.send(body + '<p>viewed <strong>' + req.session.views + '</strong> times.</p>');
});
var sio = require('socket.io').listen(app.listen(3000));
sio.set('authorization', function (data, accept) {
// check if there's a cookie header
if (data.headers.cookie) {
// if there is, parse the cookie
var rawCookies = cookie.parse(data.headers.cookie);
data.sessionID = connect.utils.parseSignedCookie(rawCookies['express.sid'],'secret');
// it checks if the session id is unsigned successfully
if (data.sessionID == rawCookies['express.sid']) {
accept('cookie is invalid', false);
}
} else {
// if there isn't, turn down the connection with a message
// and leave the function.
return accept('No cookie transmitted.', false);
}
// accept the incoming connection
accept(null, true);
});
sio.sockets.on('connection', function (socket) {
//console.log(socket);
console.log('A socket with sessionID ' + socket.handshake.sessionID + ' connected!');
// it sets data every 5 seconds
var handle = setInterval(function() {
sessionStore.get(socket.handshake.sessionID, function (err, data) {
if (err || !data) {
console.log('no session data yet');
} else {
socket.emit('views', data);
}
});
}, 5000);
socket.on('disconnect', function() {
clearInterval(handle);
});
});
Then you can have a client page under public/client.html at http://localhost:3000/client.html to see the session data populated from http://localhost:3000:
<html>
<head>
<script src="/socket.io/socket.io.js" type="text/javascript"></script>
<script type="text/javascript">
tick = io.connect('http://localhost:3000/');
tick.on('data', function (data) {
console.log(data);
});
tick.on('views', function (data) {
document.getElementById('views').innerText = data.views;
});
tick.on('error', function (reason){
console.error('Unable to connect Socket.IO', reason);
});
tick.on('connect', function (){
console.info('successfully established a working and authorized connection');
});
</script>
</head>
<body>
Open the browser console to see tick-tocks!
<p>This session is viewed <b><span id="views"></span></b> times.</p>
</body>

Categories

Resources