我尝试将聊天框添加到我的youtube网络应用中。当您进入应用程序时,会出现一条警报,要求您输入用户名告诉别人您是谁。可以说我的是name1。当我在聊天中写东西时,它显示为name1:bla bla。
但是当其他人加入聊天时,请说出name2。我看到他/她的消息为name1,他/她看到我的消息为name2。
我试图告诉socket.io之间的区别,但显然我失败了。
这是app.js:
// Socket setup
io.on('connection', function(socket) {
// username
socket.on('new user', function(username) {
socket.username = username;
io.emit('new user', username);
console.log(username + ' connected');
io.emit('connection2', "Welcome to Ömür's Chatbox " + username);
socket.on('disconnect', function() {
console.log(username + ' disconnected');
});
});
// chatbox
socket.on('chat message', function(msg){
console.log('message: ' + msg);
io.emit('chat message', msg);
});
// User connections
console.log('User ' + socket.id + ' Connected');
socket.on('disconnect', function() {
console.log('User ' + socket.id + ' Disconnected');
});
});
这是主要ejs中的脚本:
var socket = io();
var username = prompt("What's your username?");
socket.emit('new user', username);
$('form').submit(function() {
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg) {
var li = $("<li></li>");
var span = $("<span></span>").css('color', getUsernameColor(username));
span.addClass("userNameSpan");
$('#messages').append($(li).text(msg));
$(li).prepend($(span).text(username));
});
socket.on('connection2', function(msg) {
$('#messages').append($('<li style="font-style:italic;">').text(msg));
});
您可以从here
查看完整的代码答案 0 :(得分:1)
当前另一个对等方不知道发送方的用户名。
将其包含在消息中,如下所示:
$('form').submit(function() {
let message = {
username: username,
payload: $('#m').val()
}
socket.emit('chat message', message);
return false;
});
socket.on('chat message', function(message) {
let {payload, username} = message;
var li = $("<li></li>");
var span = $("<span></span>").css('color', getUsernameColor(username));
span.addClass("userNameSpan");
$('#messages').append($(li).text(payload));
$(li).prepend($(span).text(username));
}