I have made a small chat app with nodejs and now i'm trying to make it possible, if two people are chatting, that they can also send small files to each other.
I have just started learning node, so it's a bit confusing for me. I'm trying to make this work but i'm not even sure how am i supposed to do it.
So any help is welcome :)
btw var file is a file from the input type=file.
Here's my code:
index.js
var express = require("express");
var app = express();
var fs = require("fs");
var port = 8888;
// fs.readFile(sendFile, function (err, data) {
// if (err) {
// return console.error(err);
// }
// console.log("Asynchronous read: " + data.toString());
// });
app.set('views', __dirname + '/tpl');
app.set('view engine', "jade");
app.engine('jade', require('jade').__express);
app.use(express.static(__dirname + '/public'));
app.get("/", function(req, res){
res.render("page");
});
var io = require('socket.io').listen(app.listen(port));
io.sockets.on('connection', function (socket) {
socket.emit('message', { message: 'Welcome to the chat :)' });
socket.on('send', function (data) {
io.sockets.emit('message', data);
});
});
io.sockets.on('sendFile', function(data){
socket.emit('getFile',data)
});
chat.js
window.onload = function() {
var messages = [];
var socket = io.connect('http://'+location.host);
var field = document.getElementById("field");
var sendButton = document.getElementById("send");
var content = document.getElementById("content");
var name = document.getElementById("name");
var file = document.getElementById("file").files;
// file.onchange = function(e) {
// var file = document.getElementById("file").files;
// console.log(file);
// }
socket.on('message', function (data) {
if(data.message) {
messages.push(data);
var html = '';
for(var i=0; i<messages.length; i++) {
html += '<b>' + (messages[i].username ? messages[i].username : 'Server') + ': </b>';
html += messages[i].message + '<br />';
}
content.innerHTML = html;
} else {
console.log("There is a problem:", data);
}
});
socket.on('getFile', function (data) {
console.log(data);
});
sendButton.onclick = sendMessage = function() {
if(name.value == "") {
alert("Please type your name!");
} else {
socket.emit('sendFile', file);
var text = field.value;
socket.emit('send', { message: text, username: name.value });
field.value = "";
}
};
field.addEventListener("keyup", function(e){
if(e.keyCode == 13) {
sendMessage();
}
});
}
May be this is not answer using your code but you can Make it easy by using delivery module
Bidirectional File Transfers For Node.js via Socket.IO, See code on Github Link
Related
Running a node server and I am getting the following error.
SyntaxError: Unexpected end of input
var http = require('http');
var socketio = require('socket.io');
if (typeof String.prototype.startsWith != 'function') {
String.prototype.startsWith = function (str){
return this.slice(0, str.length) == str;
};
}
function log_me(msg){
var ts = new Date(new Date().getTime() - (3600000*4));
var tss = ts.toString();
tss = tss.substring(0, tss.indexOf(' GMT'));
console.log(tss + ": " + msg);
}
var app = http.createServer(function(req, res) {
var postData = "";
req.on('data', function(chunk) {
postData += chunk; //Get the POST data
});
req.on('end', function() {
if (typeof(postData) !== "undefined") {
var message = JSON.parse(postData); <-- Here is the issue line 25
//Do something here
//Todo...
}
});
res.end();
}).listen(8080); //Use a non-standard port so it doesn't override your Apache
var io = socketio.listen(app);
//var io = require('socket.io').listen(8080,'0.0.0.0');
io.set('log level', 2);
// io.set('transports', ['flashsocket', 'polling', 'websocket']);
io.set('origins', '*:*');
You can use something like that:
JSON.safeParse = function(data) {
try {
return JSON.parse(data);
} catch (e) {
return false;
}
}
Change your JSON.parse call to JSON.safeParse, and then check if the result is valid:
var message = JSON.safeParse(postData);
if (message) {
// valid!
} else {
// invalid
}
So i am running a online chat function using js that currently sends and receives messages and has a user count in the top right corner that updates when a user leaves or joins. I need help with making a js function that you can submit a name to and it saves it and prints it alongside your own messages.
my current code on chat.js-
var WebSocketServer = require("ws").Server;
var wss = new WebSocketServer({port:3030});
var msgArray = new Array();
wss.on("connection", function(client) {
client.on("message", function(message) {
wss.clients.forEach(function(client) {
sendChat(client, message);
});
msgArray.push(message);
});
sendChat(client, `Welcome to chat :)`);
sendUC();
msgArray.forEach(function(item) {
sendChat(client, item);
})
});
function sendChat(client, message) {
var msg = ["chat", message];
client.send(JSON.stringify(msg));
}
function sendUC(){
wss.clients.forEach(function(client){
var UCmsg = ["uc",wss.clients.size];
client.send(JSON.stringify(UCmsg));
});
}
My current code on client.js-
var ws = new WebSocket("ws://jg.codesphere.net:3030");
ws.onmessage = function (payload) {
var msg = JSON.parse(payload.data);
if (msg[0] == "chat") {
addMessage(msg[1]);
}
if (msg[0] == "uc") {
addMessage("Another user joined");
adduc(msg[1]);
}
};
$(function () {
document.forms[0].onsubmit = function () {
var input = $("input#message").val();
$("input#message").val('');
ws.send(input);
};
});
function User() {
}
function addMessage(m) {
var html = "<p>" + m + "</p>";
$("div#messages").append(html);
}
function adduc(m) {
var html = "<p>" + m + "</p>";
$("span#1").html(m + " users online");
}
So i need help with where i would call a user entry function and how to make the function.
I'm slowly setting up the structure a project and while I can ping an alert to every other user besides the ping source, I still need to be able to ping an alert to a specific user. I assume the best way to do this is to ping to a certain socket.id. Any ideas how to do this? socket.broadcast.to(socket.id) doesn't seem to work in my setup as I keep getting an error (Cannot read property 'to' of undefined).
client.js
// BROWSERIFY
//DEPENDENCIES
var P2P = require("socket.io-p2p");
var io = require("socket.io-client");
var ss = require("socket.io-stream");
var socket = io();
var opts = { autoUpgrade: true, peerOpts: { numClients: 10 } };
var p2p = new P2P(socket, opts);
var $ = require("jquery");
//Handler for the ping button
var pingRoom = function () {
socket.emit('pingAlert');
};
window.pingRoom = pingRoom;
var pingTwo = function () {
socket.emit('pingAlertTwo');
};
window.pingTwo = pingTwo;
////////////////////////////////////////////////////////
//Intercepts the pingBack event from the server side
socket.on('pingBack', function (data) {
alert("ALERT");
});
socket.on('pingBackTwo', function (data) {
socket.broadcast.to(socketid).emit('message', 'for your eyes only');
});
////////////////////////////////////////////////////////
//Peer number counter (incomplete functionality)
p2p.on("peer-num", function (num) {
console.log("You are peer number " + num);
$(".peerNum").html("You are connected to " + num + " peers.");
});
////////////////////////////////////////////////////////
//Appends stream to element
p2p.on("file", function (stream) {
//console.log(stream);
var img = document.createElement("img");
img.src = (window.URL || window.webkitURL).createObjectURL(new Blob(stream));
document.getElementById("receivedImages").appendChild(img);
});
////////////////////////////////////////////////////////
//Converts file to binary stream and logs progress in the console
$(function () {
$("#file").change(function (e) {
ss.forceBase64 = true;
var file = e.target.files[0];
var stream = ss.createStream();
ss(socket).emit("file", stream, { size: file.size, name: file.name });
var blobStream = ss.createBlobReadStream(file);
var size = 0;
blobStream.on("data", function (chunk) {
size += chunk.length;
console.log(Math.floor(size / file.size * 100) + "%");
});
blobStream.pipe(stream);
});
});
////////////////////////////////////////////////////////
//Logs users in the user log
socket.on('users_log', function (data) {
$('#log').append(data + "<br>");
console.log(data);
});
////////////////////////////////////////////////////////
server.js
//DEPENDENCIES
var app = require("express")();
var express = require("express");
var server = require("http").Server(app);
var p2pserver = require("socket.io-p2p-server").Server;
var io = require("socket.io")(server);
var ss = require("socket.io-stream");
var path = require("path");
//Added configuration
app.use(express.static(__dirname));
app.use(express.static("server_scripts"));
app.use(express.static("client_scripts"));
io.use(p2pserver);
//Peer number
var peerNum = 0;
////////////////////////////////////////////////////////
//Connections and disconnections
io.on("connection", function (socket) {
//Increments the peer number for connected peers
console.log("Peer " + peerNum + " connected");
io.emit("peer-num", peerNum);
peerNum++;
////////////////////////////////////////////////////////
//Streamer
ss(socket).on("file", function (stream, data) {
var filename = path.basename(data.name);
var parts = [];
stream.on("data", function (data) {
parts.push(data);
});
stream.on("end", function () {
socket.broadcast.emit("file", parts);
});
});
////////////////////////////////////////////////////////
//Holds the socket.id of connections
ID = socket.id;
////////////////////////////////////////////////////////
//Emits connection status to user end (User ID log)
io.sockets.emit('users_log', "client id - " + ID + " connected");
io.sockets.emit('users_online', ID);
////////////////////////////////////////////////////////
//Server side logging of connections
console.log('client id - ' + ID + ' connected.');
////////////////////////////////////////////////////////
//Alert listener and response
socket.on('pingAlert', function () {
console.log('Ping');
io.sockets.emit('pingBack');
});
socket.on('pingAlertTwo', function () {
console.log('PingTwo');
io.sockets.emit('pingBackTwo');
});
////////////////////////////////////////////////////////
//Handles disconnections
socket.on('disconnect', function () {
//Emits disconnection to user end (User ID log)
io.sockets.emit('users_log', "client id - " + ID + " disconnected");
//Decreases peer counter on disconnect
peerNum--;
////////////////////////////////////////////////////////
//Server side logging of disconnections
console.log('client id - ' + ID + ' disconnected.')
io.sockets.emit('users_offline', ID);
//NOTE: Features need to be added here
////////////////////////////////////////////////////////
})
});
//Listen on
server.listen(8000, function () {
console.log("Listening on 8000")
});
io.sockets.connected[ID].emit('ping',data);
ID is socketId, data is payload you want send with event.
when you write io.function() The Event is emitted for all users, but if you write socket.function(), the event is emitted for that particular socket.
If you wish to emit some message to a particular user, use socket.emit() function.
I have a nodejs chat and its working fine. I run the sever code from command prompt and then open a browser and then run it from index.php or index.html page.
Now I want to run it from another page eg welcome.php but its not working. In chat.js file i have change this
var socket = io.connect( 'http://'+window.location.hostname+':3000' );
to
var socket = io.connect( 'http://localhost/chat/welcome.php' );
but it not working
below is a sample of Chat.js file
$(function(){
var socket = io.connect( 'http://'+window.location.hostname+':3000' );
var name = $('#username').val();
var user = $('#user').val();
socket.on('users', function(data){
$('.names-list').text('');
$.each(data,function(i,v){
$('.names-list').append('<li>'+v+'</li>');
});
});
socket.on('push message', function(response){
$('.messages').append('<li><div class="msg-lhs"><span class="username"><b style="color:' + response.colorClass + '">'+response.name+'</b></span> : <span class="msg">'+response.msg+'</span></div><span data-livestamp="'+moment().unix()+'" class="msg-rhs"></span></li>');
$('.messages').animate({scrollTop: $('.messages').prop("scrollHeight")}, 500);
});
$(document).on('keyup','.message-box',function(e){
var $this = $(this);
if(e.which === 13){
var message = $this.val();
socket.emit('new message', message);
$this.val('');
}
});
});
below is a sample of server.js
var socket = require( './node_modules/socket.io' );
var express = require('./node_modules/express');
var app = express();
var server = require('http').createServer(app);
var io = socket.listen( server );
var port = process.env.PORT || 3000;
var users = [];
server.listen(port, function () {
console.log('Server listening on port %d', port);
});
io.on('connection', function (socket) {
socket.on('new user', function(name, callback){
if(name.length > 0){
if(users.indexOf(name) == -1){
socket.username = name;
users.push(socket.username);
updateUsers();
callback(true);
} else{
callback(false);
}
}
});
socket.on('new message', function(msg){
var sender = socket.username;
var message = msg;
io.emit('push message', {name: sender, msg: message});
});
function updateUsers(){
io.emit('users', users);
}
socket.on('disconnect',function(){
if(socket.username){
users.splice(users.indexOf(socket.username),1);
updateUsers();
}
});
});
How do I load my variable "vSave" with data. This is where Javascript confuses me. It seems the way I wrote this vSave is undefined when it is returned but I know the response.on('end') runs and has the data I am looking for. I just don't know how to get it returned to my router so I can use it on my client side.
var express = require('express');
var router = express.Router();
var parseString = require('xml2js').parseString;
var config = require('../config_bartapi');
var http = require('http');
var vTemp; // [DEBUG]
var vSave; // [DEBUG]
// Real Time Departure from a given station
router.route('/departTimeStation')
.get(function(req, res) {
var vParsed = '';
vCmd = 'etd';
vOrig = req.query.vOriginStation;
vDir = 'n'; // [NOTE] - 'n' or 's', north or south, OPTIONAL
vPlat = 1; // [NOTE] - 1 to 4, number of platform, OPTIONAL
var xoptions = {
host: 'api.bart.gov',
path: '/api/etd.aspx?cmd=' + vCmd + '&orig=' + vOrig + '&key=' + config.bart.client
};
var xcallback = function(response) {
response.on('data', function(chunk) {
vParsed += chunk;
});
response.on('end', function() {
parseString(vParsed, function(err, result) {
vSave = JSON.stringify(result.root.station);
});
});
};
var vTestHttp = http.request(xoptions, xcallback).end();
return res.send (vSave);
});
// list all BART stations
router.route('/listAllStations')
.get(function(req, res) {
var vParsed = '';
vCmd = 'stns';
var options = {
host: 'api.bart.gov',
path: '/api/stn.aspx?cmd=' + vCmd + '&key=' + config.bart.client
};
var callback = function(response) {
response.on('data', function(chunk) {
vParsed += chunk;
});
response.on('end', function() {
parseString(vParsed, function(err, result) {
vTemp = result.root.stations[0].station;
});
});
};
var vTestHttp2 = http.request(options, callback).end();
return res.send (vTemp)
});
module.exports = router;
Thanks for your help. It seems like an easy concept but I just can't seem to get it.
I had to edit. This is the full bit of code. I originally posted only the one module. Sorry for the extreme edit.
Try to send it in the callback you pass to parseString() function.