send/receive data in sockets.io
Question
I am learning node and sockets and have hit a stumbling block. I have my server running ok, which connects and disconnects users and adds their name to the socket. I have it so that when a user sends a message, anyone else logged in gets it and it appears in a popup alert. What I need is to send more than just the message like the username too and possibly more data. I know its possible with json but how do I include it in the data send and received? I have included the code below. So i want to add the username with the data when sent and received and display it in the popup box, like 'username sent this message.....' It works on the console.log
server.js
var http = require('http');
var Static = require('node-static');
var app = http.createServer(handler);
var io = require('socket.io').listen(app);
var port = 8080;
var files = new Static.Server('./public');
function handler (request, response) {
request.on('end', function() {
files.serve(request, response);
}).resume();
}
var numUsers = 0;
io.on('connection', (socket) => {
var addedUser = false;
socket.on('add user', (username) => {
if (addedUser) return;
// we store the username in the socket session for this client
socket.username = username;
//addedUser = true;
++numUsers;
// echo globally (all clients) that a person has connected
//socket.broadcast.emit('user joined', {
// username: socket.username,
// numUsers: numUsers
console.log(username+' has logged on, now there are '+numUsers+' online');
});
//when receive new coors
socket.on('new_message', function (data) {
socket.broadcast.emit('new_message', data);
console.log(socket.username+' just sent '+data);
});
// when the user disconnects.. perform this
socket.on('disconnect', () => {
--numUsers;
console.log(socket.username+' has left, now there are '+numUsers+' online');
});
});
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Getting Current Position</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script> var username = prompt('What\'s your username?'); </script>
<script type="text/javascript">
socket = io.connect('/');
socket.emit('add user', username);
function sendmessage() {
var new_message = document.getElementById("new_message").value;
//alert (new_message);
socket.emit('new_message', new_message);
}
socket.on('new_message', function (data) {
//socket.broadcast.emit('new_message', data);
//console.log(data);
alert(data);
});
</script>
</head>
<body>
<button type="button" onclick="sendmessage()">Send message</button><BR><BR>
<input name="new_message" type="text" id="new_message" value=""><BR>
</body>
</html>
2 answers
solution1
2 2018-11-21 17:48:55
Well after a lot of reading up I have done it like so with the following changes:
index.html
function sendmessage() {
var new_message = document.getElementById("new_message").value;
var Details3 = {
username: username,
message: new_message
};
socket.emit('new_message', Details3);
server.js
socket.on('new_message', (data) => {
var New_Details = {
username: data.username,
message: data.message
};
socket.broadcast.emit('update_message', New_Details);
console.log(data.username + ' just wrote ' + data.message);
});
solution2
0 2020-11-09 16:29:57
too late to answer but you can do it without json
index.html
function sendmessage() {
socket.emit('new_message', username , new_message);
}
server.js
socket.on('new_message', (username , message) => {
socket.broadcast.emit('update_message', username , message);
console.log(username + ' just wrote ' + message);
});
I hope it be helpful
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.