can someone change the code and make it work? it\'s for chatroom using node.js a
ID: 3716380 • Letter: C
Question
can someone change the code and make it work? it's for chatroom using node.js and socket.io.
//Package.json
{
"name": "simplechatapp",
"version": "1.0.0",
"description": "Simple chat app built with node.js and socket.io",
"dependencies": {
"express": "^4.16.3",
"jquery": "^3.3.1",
"socket.io": "^2.1.0"
}
}
/---------------------------------/
//app.js
var express = require('express'),
app = express()
server = require('http').createServer(app),
io = require('socket.io').listen(server);
nicknames = [];
app.use(express.static('public'))
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
//Listen on port 3000
server = app.listen(2000)
//listen on every connection
io.on('connection', function(socket){
// Usernames
Socket.on('new user',function(data, callback){
if(nicknames.indexOf(data) != -1){
callback(false);
}
else{
callback(true);
socket.nickname = data;
nicknames.push(socket.nickname);
updateNicknames();
}
});
function updateNickname(){
io.sockets.emit('usernames', nicknames);
}
//listen on new_message
socket.on('send message', function(data){
io.sockets.emit('new message', {msg: data,nick: socket.nicknamee});
});
socket.on('disconnect', function(data){
if(!socket.nickname) return;
nicknames.splice(nicknames.indexOf(socket.nicknames), 1);
updateNicknames();
});
});
/-----------------------------------------------------------------------/
// chat.js
$(function(){
//make connection
var socket = io.connect('http://localhost:3000');
//buttons and inputs;
var messageBox = $("#message");
var messageForm = $("#send-message");
var chat = $("#chat");
var nickForm = $('setNick');
var nickError = $('nickError');
var nickBox = $('nickname');
var users = $('#users');
nickForm.submit(function(e){
e.preventDefault();
socket.emit('new user', nickBox.val(),function(data){
if(data){
$('#nickWrap').hide();
$('#contentWrap').show();
}
else{
nickError.html('That username is already taken! Try again.');
}
});
nickBox.val("");
});
socket.on('usernames', function(data){
var html ='';
for(i=0; i <data.length;i++){
html += data[i] + '<br/>'
}
users.html(html);
})
//Emit message
messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', messageBox.val());
});
//Listen on new_message
socket.on("new message", function(data) {
messageBox.val("");
chat.append('<b>' + data.nick +'</b> '+ data.msg + "<br/>");
});
});
/----------------------------------------------------------------------------/
index.html
<html>
<head>
<title>chatroom</title>
<style>
#chat{
height: 500px;
}
#contentWrap{
display:none;
}
#chatWrap{
Float:left;
border:1px #000 solid;
}
</style>
</head>
<body>
<header>
<h1>ChatRoom</h1>
</header>
<div id="nickWrap">
<p>Enter a Username:</p>
<p id="nickError"></p>
<form id="setnick">
<input size="35" id="nickname"></input>
<button type='button'>submit</button>
</form>
</div>
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
<form id="send-message">
<input size="35" id="message"></input>
<button type='button'>submit</button>
</form>
</div>
<div id="users"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="chat.js"></script>
</body>
</html>
/------------------------------------------------------/
CUsersmankLesktopiprivate chat,appis - Sublime Text (UNREGISTERED) ile Edit Selectin Find View Gclo Tools Prajet Prefee Help hatjs 1 var express require'express app express) server raquira('http).creatosorver(app), io require( socket.io').listen (server); 7 app.use(express.static('public)) 1 app.get(, function (reo, res) Listen on port 3880 15 server app.listen(2e) 16 7/isten on every tonnection ? io . on( 'connect 1an', function(socket){ 19 28 Userrianes socket.an('now user',functian(data, caLLback)i if(nicknanes.indexof (data) !1) 23 callbatk(false); 25 callbatk(true); cocket.nicknanedata nicknamespush(socket.nickname); updateNicknanes(); 29 31 32 function updatoNicknan io.sockets.enit('usernanes, nicknanes) 34 35 liston on now mossage socket.on'send nessagc, function (data)t 37 ?O.suckets.enit('newnes sage', [msg: dal«,nick: se?ket .n?cknamee) ) i 48 socket.ori( 'distonnect', funto(datu)l if( socket.nicknane) roturn; nicknanes.splice nicknames.indexof (socket.nicknanes). 1); updateNicknanes(); 46Explanation / Answer
I have tried my best and made it work. There were many silly mistakes to mention. Kindly compare the code I am pasting below with yours. I have also merged the chat.js code into a script tag as it was not loading. Try if it loads for you.
app.js
var express = require('express'),
app = express()
server = require('http').createServer(app),
io = require('socket.io').listen(server);
nicknames = [];
//app.use(express.static('public'))
app.get('/', function (req, res) {
res.sendFile(__dirname + '/index.html');
});
//Listen on port 3000
server.listen(process.env.PORT || 3000);
//listen on every connection
io.sockets.on('connection', function(socket){
console.log("socket connected...");
// Usernames
socket.on('new user',function(data, callback){
console.log("user connected...");
if(nicknames.indexOf(data) != -1){
callback(false);
}
else{
callback(true);
socket.nickname = data;
nicknames.push(socket.nickname);
updateNicknames();
}
});
function updateNicknames(){
io.sockets.emit('usernames', nicknames);
}
//listen on new_message
socket.on('send message', function(data){
io.sockets.emit('new message', {msg: data,nick: socket.nicknamee});
});
socket.on('disconnect', function(data){
if(!socket.nickname) return;
nicknames.splice(nicknames.indexOf(socket.nicknames), 1);
updateNicknames();
});
});
index.html
<html>
<head>
<title>chatroom</title>
<style>
#chat{
height: 500px;
}
#contentWrap{
display:none;
}
#chatWrap{
Float:left;
border:1px #000 solid;
}
</style>
</head>
<body>
<header>
<h1>ChatRoom</h1>
</header>
<div id="nickWrap">
<p>Enter a Username:</p>
<p id="nickError"></p>
<form id="setNick">
<input size="35" id="nickname"></input>
<input type="submit" value="submit">
</form>
</div>
<div id="contentWrap">
<div id="chatWrap">
<div id="chat"></div>
<form id="send-message">
<input size="35" id="message"></input>
<input type="submit" value="submit">
</form>
</div>
<div id="users"></div>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
//make connection
var socket = io.connect('http://localhost:3000');
//buttons and inputs;
var messageBox = $("#message");
var messageForm = $("#send-message");
var chat = $("#chat");
var nickForm = $('#setNick');
var nickError = $('#nickError');
var nickBox = $('#nickname');
var users = $('#users');
nickForm.submit(function(e){
console.log("nicname sent");
e.preventDefault();
socket.emit('new user', nickBox.val(),function(data){
if(data){
$('#nickWrap').hide();
$('#contentWrap').show();
}
else{
nickError.html('That username is already taken! Try again.');
}
});
nickBox.val("");
});
socket.on('usernames', function(data){
var html ='';
for(i=0; i <data.length;i++){
html += data[i] + '<br/>'
}
users.html(html);
})
//Emit message
messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', messageBox.val());
});
//Listen on new_message
socket.on("new message", function(data) {
messageBox.val("");
chat.append('<b>' + data.nick +'</b> '+ data.msg + "<br/>");
});
});
</script>
</body>
</html>
Thank you. If you have any further doubt comment below.
N.B:
I have changed the port to 3000 in app.js as it was written port 3000 in comment line and also in chat.js.
Related Questions
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.