I'm using node.js and I get the error in the picture every single time a client disconnects (This happens when I just close the tab and I've also tried using socket.disconnect() on both the client and the server side)
here's my code
var io = require('socket.io').listen(4000);
var fs = require('fs');
io.sockets.on('connection', function(socket) {
socket.on('login', function(info)
{
fs.readFile("chatLog.txt", function(err, data)
{
if(err)
{
return console.error(err);
}
socket.emit('incomingMessage', data.toString());
});
socket.broadcast.emit('newUser', info);
});
socket.on('message', function(content) {
console.log(content);
io.sockets.emit('incomingMessage', content);
});
socket.on('logout', function(name)
{
socket.broadcast.emit('incomingMessage', "user: " + name + " has logged out");
//socket.disconnect();
});
});
can anyone tell me how to disconnect without having the server crash with that error?
client side HTML:
<html>
<head>
<!-- This is the websocket SERVER -->
<script src="http://localhost:4000/socket.io/socket.io.js"></script>
<script src="client.js"></script>
</head>
<body>
<div id="loginDiv">
username: <input type="text" id = "userName"><br>
<input type = "button" id="login" value = "login" onClick="login()">
</div>
<div id="logoutDiv" style="visibility:hidden">
<input type = "button" id = "messageRedir" value = "send message" onClick= "gotoMessage()">
<input type = "button" id = "logout" value = "logout" onClick="logout()">
</div>
<div id="sendMessage" style="visibility:hidden">
<input type = "text" id="messageBox"><br>
<input type = "button" value="send message" onClick="sendMessage()">
<input type = "button" value = "cancel" onClick="back">
</div>
<div id="msg"></div>
</body>
</html>
Client side JS:
var userName = null;
var socket = null;
function login()
{
socket = io.connect('http://localhost:4000');
userName = document.getElementById('userName').value;
document.getElementById("loginDiv").style.visibility = "hidden";
document.getElementById("logoutDiv").style.visibility = "visible";
socket.emit('login', userName+ ' has connected');
// Attach event handler for event fired by server
socket.on('incomingMessage', function(data) {
var elem = document.getElementById('msg');
console.log(data);
elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back
});
socket.on('newUser', function(data) {
var elem = document.getElementById('msg');
console.log(data);
elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back
});
}
function logout()
{
document.getElementById("loginDiv").style.visibility = "visible";
document.getElementById("logoutDiv").style.visibility = "hidden";
document.getElementById('msg').innerHTML = "";
socket.emit('logout', userName);
socket.disconnect();
socket = null;
}
function gotoMessage()
{
document.getElementById("loginDiv").style.visibility = "hidden";
document.getElementById("msg").style.visibility = "hidden";
document.getElementById("sendMessage").visibility = "visible";
}
function back()
{
document.getElementById("loginDiv").style.visibility = "visible";
document.getElementById("msg").style.visibility = "visible";
document.getElementById("sendMessage").visibility = "hidden";
}
function sendMessage()
{
var mess = document.getElementById('messageBox').value;
socket.emit('message', mess);
}
The problem is most likely in the logout function where you are using the socket (that is no longer active) to emit an event. You should use io.sockets.emit instead. I have some suggestions.
Instead of using the socket.emit('logout', username) event on the client side, use the built in logout event that gets fired when the user close the browser. That event is disconnect. You don't need to pass the username with each request either. You only need to pass it once with the login event. Then you can store the username on the server as a property of the socket.
Client Side
function login()
{
socket = io.connect('http://localhost:4000');
userName = document.getElementById('userName').value;
document.getElementById("loginDiv").style.visibility = "hidden";
document.getElementById("logoutDiv").style.visibility = "visible";
// just send the username
socket.emit('login', userName);
// Attach event handler for event fired by server
socket.on('incomingMessage', function(data) {
var elem = document.getElementById('msg');
console.log(data);
elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back
});
socket.on('newUser', function(data) {
var elem = document.getElementById('msg');
console.log(data);
elem.innerHTML = data + "<br>" + elem.innerHTML; // append data that we got back
});
}
function logout()
{
document.getElementById("loginDiv").style.visibility = "visible";
document.getElementById("logoutDiv").style.visibility = "hidden";
document.getElementById('msg').innerHTML = "";
socket.disconnect();
socket = null;
}
Server Side
io.sockets.on('connection', function(socket) {
socket.on('login', function(uxname)
{
// store username variable as property of the socket connection
// this way we can handle the disconnect message later
this.username = uxname;
fs.readFile("chatLog.txt", function(err, data)
{
if(err)
{
return console.error(err);
}
socket.emit('incomingMessage', data.toString());
});
socket.broadcast.emit('newUser', uxname);
});
socket.on('message', function(content) {
console.log(content);
io.sockets.emit('incomingMessage', content);
});
socket.on('disconnect', function(){
// don't use socket.broadcast.emit. at this point the socket is destroyed and you cant call events on it. That is most likely why you have the error.
// use io.sockets.emit instead
io.sockets.emit('incomingMessage', "user: " + this.username + " has logged out")
});
});
Related
I'm using socket.io v4 with NodeJS (Express).
So, the situation that I have is that I have a chat window for client and the client can enter their email and message. Now, I want to create a room based on that email and have another client join that room. My current implementation doesn't work. It creates the room but the other client is unable to join it.
Server Side Code:
io.of(/^\/dynamic-[a-zA-Z0-9]+$/).on("connection", (socket) => {
let email;
const namespace = socket.nsp.name;
let namespaceToCheck = namespace.split('-');
//console.log(namespaceToCheck[1])
User.findOne({apiKey: namespaceToCheck[1]})
.then((doc)=> {
if(namespaceToCheck[1] == doc.apiKey) {
socket.once("pass-email", (data) => {
io.of(namespace).emit("pass-email", data);
email = data;
})
console.log("Valid Connection");
socket.on("chat-message", (msg) => {
socket.join(email, function(){
//console.log(`Socket now in ${socket.rooms}`);
});
//console.log(msg);
console.log(socket.rooms);
Message.findOne({namespace: namespace})
.then((doc) => {
// console.log(doc);
doc.messages.push(msg);
doc.save().then((saved) => { return Promise.resolve(saved) });
})
// console.log(socket.handshake);
//io.of(namespace).sockets.in(data).emit("chat-message", msg);
console.log(email);
io.of(namespace).to(email).emit("chat-message", msg);
})
}
})
.catch((err)=> {
console.log(err);
})
});
Client Socket Code (from which I'm passing the email)
var chatSocket = io("http://localhost:3000/dynamic-8171d2a713d65c5edf81e45af4d14558a2c62275df05c73ca198a94d422e5948");
var chatBtn = document.querySelector('.chat-btn');
var input = document.querySelector('.chat-input');
var messages = document.querySelector(".messages");
var emailInputTag = document.querySelector(".email-input");
input.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault();
if (input.value && emailInputTag.value) {
chatSocket.emit('create-room', emailInputTag.value);
//chatSocket.join(emailInputTag.value)
chatSocket.emit('chat-message', emailInputTag.value + ':' + input.value);
input.value = '';
}
}
});
chatBtn.addEventListener('click', function(e) {
e.preventDefault();
if (input.value && emailInputTag.value) {
chatSocket.emit('chat-message', emailInputTag.value + ':' + input.value);
input.value = '';
}
});
chatSocket.on('chat-message', function(msg) {
var item = document.createElement('div');
item.classList.add('msg');
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
This is the rooms that this socket is in:
Client chat socket code (from which I want to receive room event and join the received room)
var chatSocket = io(`http://localhost:3000/dynamic-${ApiKey}`);
chatSocket.on("connect", function () {
console.log("Connected-test-succeeded");
// Connected, let's sign-up for to receive messages for this room
});
chatSocket.on("pass-email", (val) => {
console.log(val);
console.log("Listening");
});
var chatBtn = document.querySelector(".chat-btn");
var input = document.querySelector(".chat-input");
var messages = document.querySelector(".messages");
input.addEventListener("keypress", function (event) {
if (event.key === "Enter") {
event.preventDefault();
if (input.value) {
chatSocket.emit();
chatSocket.emit(
"chat-message",
"Owner" + ":" + input.value
);
input.value = "";
}
}
});
chatBtn.addEventListener("click", function (e) {
e.preventDefault();
if (input.value) {
chatSocket.emit(
"chat-message",
"Owner" + ":" + input.value
);
input.value = "";
}
});
chatSocket.on("chat-message", function (msg) {
console.log("Message received: " + msg);
var item = document.createElement("div");
item.classList.add("msg");
item.textContent = msg;
messages.appendChild(item);
window.scrollTo(0, document.body.scrollHeight);
});
P.S: I know that the code is a bit messy but what I'm trying to do here is making a tawk.to clone so different namespace for each website url and the rooms are different in the said namespace for different users.
I am newbie to webRTC. I tried to create a Chat application, sending a simple text message.
But getting this error:
Uncaught DOMException: Failed to execute 'send' on 'RTCDataChannel': RTCDataChannel.readyState is not 'open'
at HTMLButtonElement.
Here is my code.
index.html
<div class = "row">
<div class = "col-md-4 col-md-offset-4">
<h2> Please sign in</h2>
<input type = "email" id = "usernameInput"
class = "form-control formgroup" placeholder = "Enter Name"
required = "" autofocus = "" title="please Enter name">
<button id = "loginBtn" class = "btn btn-lg btn-primary btnblock">
Sign in</button>
</div>
</div>
</div>
<div id = "callPage" class = "call-page container">
<div class = "row">
<div class = "col-md-4 col-md-offset-4 text-center">
<div class = "panel panel-primary">
<div class = "panel-heading">Text chat</div>
<div id = "chatarea" class = "panel-body text-left"></div>
</div>
</div>
</div>
<div class = "row text-center">
<div class = "col-md-12">
<input id = "msgInput" type = "text" placeholder = "Enter message" />
<button id = "sendMsgBtn" class = "btn-success btn">Send</button>
</div>
</div>
</div>
<script >
var name;
var connectedUser;
var conn = new WebSocket('ws://localhost:8000');
conn.onopen = function () {
console.log("Connected to the signaling server");
};
//when we got a message from a signaling server
conn.onmessage = function (msg) {
console.log("Got message", msg.data);
var data =JSON.parse( msg.data);
// console.log(data.type);
switch(data.type) {
case "login":
handleLogin(data.success);
break;
//when somebody wants to call us
case "offer":
handleOffer(data.offer, data.name);
break;
case "answer":
handleAnswer(data.answer);
break;
//when a remote peer sends an ice candidate to us
case "candidate":
handleCandidate(data.candidate);
console.log('candidate');
break;
case "leave":
handleLeave();
break;
default:
break;
}
};
conn.onerror = function (err) {
console.log("Got error", err);
};
//alias for sending JSON encoded messages
function send(message) {
//attach the other peer username to our messages
if (connectedUser) {
message.name = connectedUser;
}
conn.send(JSON.stringify(message));
};
var loginPage = document.querySelector('#loginPage');
var usernameInput = document.querySelector('#usernameInput');
var loginBtn = document.querySelector('#loginBtn');
var callPage = document.querySelector('#callPage');
var callToUsernameInput = document.querySelector('#callToUsernameInput');
// var callBtn = document.querySelector('#callBtn');
// var hangUpBtn = document.querySelector('#hangUpBtn');
var msgInput = document.querySelector('#msgInput');
var sendMsgBtn = document.querySelector('#sendMsgBtn');
var chatArea = document.querySelector('#chatarea');
var yourConn;
var dataChannel;
callPage.style.display = "none";
// Login when the user clicks the button
loginBtn.addEventListener("click", function (event) {
name = usernameInput.value;
if (name.length > 0) {
send({
type: "login",
name: name
});
}
});
function handleLogin(success) {
if (success === false) {
alert("Ooops...try a different username");
} else {
loginPage.style.display = "none";
callPage.style.display = "block";
//using Google public stun server
var configuration = {
"iceServers": [{ "url": "stun:stun2.1.google.com:19302" }]
};
yourConn = new RTCPeerConnection(configuration,{optional: [{RtpDataChannels: true}]});
// Setup ice handling
yourConn.onicecandidate = function (event) {
console.log('enter into login');
if (event.candidate) {
send({
type: "candidate",
candidate: event.candidate
});
}
};
//creating data channel
dataChannel = yourConn.createDataChannel("channel", {reliable:true});
dataChannel.onerror = function (error) {
console.log("Ooops...error:", error);
};
//when we receive a message from the other peer, display it on the screen
dataChannel.onmessage = function (event) {
chatArea.innerHTML += connectedUser + ": " + event.data + "<br />";
};
dataChannel.onclose = function () {
console.log("data channel is closed");
};
}
};
//when we got an answer from a remote user
function handleAnswer(answer) {
yourConn.setRemoteDescription(new RTCSessionDescription(answer));
};
//when we got an ice candidate from a remote user
function handleCandidate(candidate) {
yourConn.addIceCandidate(new RTCIceCandidate(candidate));
};
//when user clicks the "send message" button
sendMsgBtn.addEventListener("click", function (event) {
var val = msgInput.value;
chatArea.innerHTML += name + ": " + val + "<br />";
//sending a message to a connected peer
dataChannel.send(val);
msgInput.value = "";
});
</script>
server.js
var WebSocket = require('ws').Server;
var Port= 8000;
//creating a websocket server at port 9090
var wss = new WebSocket({port: Port});
var fs=require('fs');
var http=require('http');
console.log("STARTED");
var server = http.createServer(function (req, resp) {
fs.readFile("index.html", function (error, pgResp) {
if (error) {
resp.write('Contents you are looking are Not Found');
} else {
resp.end(pgResp);
}
});
});
server.listen(3000);
//all connected to the server users
var users = {};
//when a user connects to our sever
wss.on('connection', function(connection) {
console.log("User connected");
//when server gets a message from a connected user
connection.on('message', function(message) {
var data;
//accepting only JSON messages
try {
data = JSON.parse(message);
} catch (e) {
console.log("Invalid JSON");
data = {};
}
//switching type of the user message
switch (data.type) {
//when a user tries to login
case "login":
console.log("User logged", data.name);
//if anyone is logged in with this username then refuse
if(users[data.name]) {
sendTo(connection, {
type: "login",
success: false
});
} else {
//save user connection on the server
users[data.name] = connection;
connection.name = data.name;
sendTo(connection, {
type: "login",
success: true
});
}
break;
case "offer":
//for ex. UserA wants to call UserB
console.log("Sending offer to: ", data.name);
//if UserB exists then send him offer details
var conn = users[data.name];
if(conn != null) {
//setting that UserA connected with UserB
connection.otherName = data.name;
sendTo(conn, {
type: "offer",
offer: data.offer,
name: connection.name
});
}
break;
case "answer":
console.log("Sending answer to: ", data.name);
//for ex. UserB answers UserA
var conn = users[data.name];
if(conn != null) {
connection.otherName = data.name;
sendTo(conn, {
type: "answer",
answer: data.answer
});
}
break;
case "candidate":
console.log("Sending candidate to:",data.name);
var conn = users[data.name];
if(conn != null) {
sendTo(conn, {
type: "candidate",
candidate: data.candidate
});
}
break;
case "leave":
console.log("Disconnecting from", data.name);
var conn = users[data.name];
conn.otherName = null;
//notify the other user so he can disconnect his peer connection
if(conn != null) {
sendTo(conn, {
type: "leave"
});
}
break;
default:
sendTo(connection, {
type: "error",
message: "Command not found: " + data.type
});
break;
}
});
//when user exits, for example closes a browser window
//this may help if we are still in "offer","answer" or "candidate" state
connection.on("close", function() {
if(connection.name) {
delete users[connection.name];
if(connection.otherName) {
console.log("Disconnecting from ", connection.otherName);
var conn = users[connection.otherName];
conn.otherName = null;
if(conn != null) {
sendTo(conn, {
type: "leave"
});
}
}
}
});
connection.send(JSON.stringify("Hello world"));
});
function sendTo(connection, message) {
connection.send(JSON.stringify(message));
}
I have searched many posts and tried removing "{optional: [{RtpDataChannels: true}]}" ,set reliable=false. But still facing the same problem.Is it the chrome version problem? I am using Version 62.0.3202.75 (Official Build) (32-bit) of chrome.
I'm trying to create a chat system, where a user can send message to everybody (and this message is displayed in the div with id "chat") and I've achieved this feature. Now I'd like to implement a private chat. A user can click on another user's name on the right column (which shows all logged users), once he clicked on a username a little window will appear (div with class "chatpopup") and in this window there is a submit button and an input text to be filled with a message, once submit button has been clicked the message should be sent to the other user.
This is what I have, if I click on a user (on the right side of the screen) the little window (chatpopup) is shown but when I try to submit the form inside this little window the app crashes.
I'd also like to receive some hints about building a private chat, for example how can I open a new window (with the message receive) in the client side of the user that should receive the message?
index.html
<html>
<head>
<title>Chat with socket.io and node.js</title>
<style>
#contentWrap
{
width:100%;
display: none;
}
#chatWrap {float: left; width:80%;}
#chat
{
height:500px;
width:96%;
border: 1px #000 solid;
padding-left:2%;
padding-right:2%;
}
#users
{
margin-left:82%; width:15%;
height:500px;
border: 1px #000 solid;
text-align:right;
}
#send-message {margin-top:3%; width:100%;}
#message {width:80%;}
.err1r{ padding-top:1%;
color: red;
}
.whisper{
color: gray;
font-style: italic;
}
p.sideusername:nth-child(even) {background-color:#FAFAFA; padding-bottom:5%; padding-top:5%;}
p.sideusername:nth-child(odd) {background-color: #f5f5f0; padding-bottom:5%; padding-top:5%;}
.chatpopup {width:350px; height: 250px; background-color:blue;}
#interlocutore {background-color:red; height: 30px; text-align: left;}
#msgspace {height:150px; background-color:yellow;}
</style>
</head>
<body>
<div id="nickWrap">
<p>Enter a username:</p>
<p id="nickError"></p>
<form id="setNick">
<input size="35" id="nickname"></input>
<input type="submit"></input>
</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"></input>
</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>
jQuery(function($){
var socket = io.connect();
var $nickForm = $('#setNick');
var $nickError = $('#nickError');
var $nickBox = $('#nickname');
var $users = $('#users');
var $messageForm = $('#send-message');
var $messageFormPopup = $('#send-message-popup');
var $messageBox = $('#message');
var $messageBoxPopup = $('#messagePopup');
var $chat = $('#chat');
$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){
$users.empty();
for(var i=0; i < data.length; i++){
$users.append('<p class="sideusername">' + data[i] + "</p>");
}
});
$messageForm.submit(function(e)
{
e.preventDefault();
socket.emit('send message', $messageBox.val(), function(data)
{
});
$chat.append('<span class="error">' + data + "</span><br/>");
$messageBox.val('');
});
$messageFormPopup.submit(function(e)
{
e.preventDefault();
socket.emit('send popup message', $messageBoxPopup.val(), function(dataPopup)
{
});
$messageBoxPopup.val('');
});
socket.on('load old msgs', function(docs){
for(var i=docs.length-1; i >= 0; i--){
displayMsg(docs[i]);
}
});
socket.on('new message', function(data){
displayMsg(data);
});
function displayMsg(data){
$chat.append('<span class="msg"><b>' + data.nick + ': </b>' + data.msg + "</span><br/>");
}
socket.on('whisper', function(data){
$chat.append('<span class="whisper"><b>' + data.nick + ': </b>' + data.msg + "</span><br/>");
});
$(document).on("click", ".closepopup", function() {
$(this).parents('.chatpopup').hide();
});
$(document).on("click", ".sideusername", function()
{
var interlocutore = $(this).text();
$chat.append('<div class="chatpopup"><table><tr><td id="interlocutore"></td><td><p class="closepopup">X</p></td></tr><tr><td colspan="2" id="msgspace"></td></tr><tr><td colspan="2"><form id="send-message-popup"> <input size="35" id="messagePopup"></input><input type="submit"></input></form></td></tr></table></div>');
$('#interlocutore').append(interlocutore);
});
});
</script>
</body>
</html>
app.js
var express = require('express'),
app = express(),
server = require('http').createServer(app),
io = require('socket.io').listen(server),
mongoose = require('mongoose'),
users = {};
server.listen(3000);
mongoose.connect('mongodb://localhost/chat', function(err)
{
if(err)
console.log(err);
else console.log('Connected to mongodb!');
});
var chatSchema = mongoose.Schema(
{
nick: String,
msg: String,
created: {type: Date, default: Date.now}
});
var Chat = mongoose.model('Message', chatSchema);
app.get('/', function(req, res)
{
res.sendfile(__dirname + '/index.html');
});
io.sockets.on('connection', function(socket)
{
var query = Chat.find({});
query.sort('-created').limit(8).exec(function(err, docs)
{ // carico gli ultimi 8 messaggi in ordine di data
if(err) throw err;
socket.emit('load old msgs', docs);
});
socket.on('new user', function(data, callback)
{
if (data in users)
callback(false);
else
{
callback(true);
socket.nickname = data;
users[socket.nickname] = socket;
updateNicknames();
}
});
function updateNicknames()
{
io.sockets.emit('usernames', Object.keys(users));
}
socket.on('send message', function(data, callback)
{
var msg = data.trim();
var newMsg = new Chat({msg: msg, nick: socket.nickname});
newMsg.save(function(err)
{
if(err) throw err;
io.sockets.emit('new message', {msg: msg, nick: socket.nickname});
});
socket.on('disconnect', function(data)
{
if(!socket.nickname) return;
delete users[socket.nickname];
updateNicknames();
});
});
socket.on('send popup message', function(data, callback)
{
/*var msgPopup = dataPopup.trim();
if (msgPopup !== "")
users[interlocutore].emit('whisper', {msg: msgPopup, nick: socket.nickname});
*/
var msg = data.trim()+" hello";
var newMsg = new Chat({msg: msg, nick: socket.nickname});
newMsg.save(function(err)
{
if(err) throw err;
io.sockets.emit('new message', {msg: msg, nick: socket.nickname});
});
socket.on('disconnect', function(data)
{
if(!socket.nickname) return;
delete users[socket.nickname];
updateNicknames();
});
});
});
To create a private chat using socket.IO, you need to first understand how rooms in socket.IO work. You can find loads of tutorials. You can also see this post for help.
Now you need to extend this functionality to create a private chat system. In order to do so, you need to have an unique id for each client that is either connected or is online. socket.id is an unique key that each client gets upon joining the chat.
On the client side, you can emit a name along with the message to the server. You do so like this:
socket.emit('privateMessage', 'theUserName', message);
On the server side, you could manage an array of the users who are connected and save their unique usernames or id's.
var connectedClients = {};
So each time an user connects to the chat, (for which you are probably using the new user event), save the user's id in the connectedClients.
connectedClients[username] = socket.id;
Where username is the name that is sent to the server while an user is connecting to the chat system. (I hope you know how to do this. If not, do ask me.)
Then we make a listener to listen to the privateMessage event and emit to the message to that particular user, we do:
socket.on('privateMessage', function(to, message) {
var id = connectedClients[to];
io.sockets.socket(id).emit('sendPrivateMessage', socket.username, message);
});
Finally, on the client side, your listener for the sendPrivateMessage receives the message and you can update your view accordingly.
The idea is that the server saves each socket connected to it by the username: users[socket.nickname] = socket;
so whenever a user send a message to another user - you should emit an event - send to that the username of the other user - take the socket of that user and emit him a message:
client:
socket.emit('sendPrivate','someusername','message');
socket.on('privateMsg',function(from,msg){
//write private message from user 'from'
});
server:
socket.on('sendPrivate',function(to,msg){
users[to].emit('privateMsg',socket.username,msg);
});
I have a basic chat working with NodeJS, express, and socket.io. I'm trying to add my own simple javascript function to the index.html. When I send message to other connected users, my function LoadRect() is draw a square but only on my web page. I want THE SAME square to be displayed on the other users screens with message. The message has random coordinates x, y, and random color (massege, x, y, c). Help me please. (Sorry for my english.)
index.html
<script src="/socket.io/socket.io.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
var x;
var y;
var c;
function LoadRect() {
var e = document.createElement("div");
e.className = "rect";
document.body.appendChild(e);
e.appendChild(document.createTextNode("Square"));
e = e.style;
e.width = e.height='100px';
e.position = "absolute";
x = Math.floor(Math.random()*400+200)+'px';
y = Math.floor(Math.random()*400)+'px';
c = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
e.left = x;
e.top = y;
e.background = c;
}
var socket = io.connect('http://localhost:8181');
socket.on('connect', function(){
socket.emit('adduser', prompt("What's your name?", "Guest"));
});
socket.on('updatechat', function (username, data) {
$('#conversation').append('<b>' + username + ':</b> '+ data + '</br>');
});
socket.on('updateusers', function(data) {
$('#users').empty();
$.each(data, function(key, value) {
$('#users').append('<div>' + key + '</div>');
});
});
$(function(){
$('#datasend').click( function() {
var message = $('#data').val();
$('#data').val('');
//LoadRect();
LoadRect();
socket.emit('sendchat', message, x, y, c);
});
$('#data').keypress(function(e) {
if(e.which == 13) {
$(this).blur();
$('#datasend').focus().click();
}
});
});
</script>
<b>USERS</b>
<div id="users"></div>
<div id="conversation"></div>
<input id="data" />
<input type="button" id="datasend" value="send" />
app.js
var express = require('express')
, app = express()
, http = require('http')
, server = http.createServer(app)
, io = require('socket.io').listen(server);
server.listen(8181);
app.get('/', function (req, res) {
res.sendfile(__dirname + '/index.html');
});
var usernames = {};
io.sockets.on('connection', function (socket) {
socket.on('sendchat', function (data, x, y, c) {
io.sockets.emit('updatechat', socket.username, data + ' [x=' + x + '; y=' + y + '; c=' + c +']');
});
socket.on('adduser', function(username){
socket.username = username;
usernames[username] = username;
socket.emit('updatechat', 'SERVER', ' connected');
socket.broadcast.emit('updatechat', 'SERVER', username + ', hello');
io.sockets.emit('updateusers', usernames);
});
socket.on('disconnect', function(){
delete usernames[socket.username];
io.sockets.emit('updateusers', usernames);
socket.broadcast.emit('updatechat', 'SERVER', socket.username + ', bye');
});
});
I have the following code:
var room = "1";
var chat = io.connect("localhost:3700/");
self.chat = chat;
chat.on("connection", function(socket){
socket.emit("room", room);
socket.on('message', function (data) {
self.receiveMessage(data);
});
});
chat.broadcast.to(room).emit('send',"HEllo");
receiveMessage:
receiveMessage: function(data){
var $elem = $("#chat1");
var $content = $elem.find(".messageText");
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.html(html);
} else {
console.log("There is a problem:", data);
}
}
The line chat.broadcast.to(room).emit('send',"HEllo"); gives me the error:
Uncaught TypeError: Cannot call method 'to' of undefined
What am I doing wrong?
Not really sure but I think you can send a broadcast only on connection.
You can try this:
var room = "1";
var chat = io.connect("localhost:3700/");
self.chat = chat;
chat.on("connection", function(socket){
socket.emit("room", room);
socket.on('message', function (data) {
self.receiveMessage(data);
});
chat.broadcast.to(room).emit('send',"HEllo");
});
Of course you can also send the broadcast in a separate handler, i.e.:
var room = "1";
var chat = io.connect("localhost:3700/");
self.chat = chat;
chat.on("connection", function(socket){
socket.emit("room", room);
socket.on('message', function (data) {
self.receiveMessage(data);
});
socket.on('foo event', function(data) {
chat.broadcast.to(room).emit('send',"HEllo");
}
});