
[英]Socket.io broadcast.to not working but broadcast.emit does
[英]Broadcast.emit not excluding sender in Socket.IO
尝试使用socket.io和javascript显示“用户正在键入”消息。 认为这将与广播事件(在我的情况下是在输入字段上的按键操作)广播然后将数据复制到h4标签一样容易。
问题是广播。emit将“用户正在键入”文本发送给每个客户端,包括发送方。 我将在下面粘贴我的代码段。 先感谢您。
**server**
const express = require('express');
const fs = require('fs');
const path = require('path');
const http = require('http');
const socketIO = require('socket.io');
const publicPath = path.join(__dirname, 'public');
const port = process.env.PORT || 3001;
let app = express();
let server = http.createServer(app);
var io = socketIO(server);
var user;
app.use(express.static(publicPath));
let usersOnline = []; //keeps track of current users online
io.on('connection', (socket) => {
let user = socket.id;
socket.emit('user', user);
socket.id = "anon";
socket.on('new user', function(data,callback) {
//if user name is taken
if(usersOnline.indexOf(data) != -1 || data == ''){
callback(false);
}else{
//if username is not taken
callback(true);
socket.id = data;
//pushes data(username) to data
usersOnline.push(socket.id);
//sends back to client usersOnline array
io.sockets.emit('new user', {usersOnline: usersOnline, user: socket.id});
console.log(usersOnline.length)
}
});
socket.on('disconnect', () => {
usersOnline.splice(usersOnline.indexOf(socket.id), 1);
//emits count users, sets current user
io.sockets.emit('new user', {usersOnline: usersOnline, user: socket.id});
console.log(usersOnline.length)
});
socket.on('send msg' , function(data){
io.sockets.emit('send msg', {msg: data, user: socket.id});
})
socket.on('typing', function(data){
socket.broadcast.emit('typing', data);
})
});
server.listen(port, () => {
console.log('server is running master')
});
客户
let user;
let isTyping = document.querySelector('#isTyping')
let welcome_header = document.querySelector("#welcome_header");
let users_online_container = document.querySelector(".users_online");
join_btn.addEventListener("click", function(e){
e.preventDefault();
user = input.value;
//sets user name to input.value
socket.emit('new user', input.value, function(data){
if(data){
userName_page.style.display = "none"
chat_page.style.display = "flex";
welcome_header.innerHTML = input.value + ' has joined the party';
addAnimation();
}else{
if(input.value == ''){
input.classList.add("input_error");
let error_msg = document.getElementById('error_input');
error_msg.innerHTML = '*Invalid, Please Type a Username'
error_msg.style.display = "block";
input.style.border = "2px solid red";
}else{
input.classList.add("input_error");
let error_msg = document.getElementById('error_input');
error_msg.style.display = "block";
error_msg.innerHTML = "Woops, sorry but that user name is already taken, please try again";
}
}
});
socket.on('new user' , function (data){
counter.innerHTML = (data.usersOnline.length + " Online");
user = data.user;
let header = document.createElement('h3');
for(let i = 0; i < data.usersOnline.length; i++){
users_online_container.append(header);
header.innerHTML = data.user;
}
});
});
//msg send
btn_send.addEventListener('click', function(){
socket.emit('send msg', msg_input.value);
});
//checks if enter is pressed, if so emits message to chat
function search(ele) {
if(event.key === 'Enter') {
socket.emit('send msg', msg_input.value);
}
}
socket.on('send msg', function(data){
if(data.user == user){
msg_input.value = '';
let p = document.createElement('p');
receive_.append(p);
p.innerHTML = "<span class = 'er'>" + 'You' + "</span>" + ": " + data.msg;
p.style.textAlign = 'right';
p.style.backgroundColor = "red";
p.style.justifyContent = "flex-end";
p.style.paddingRight = "2em";
}
else{
msg_input.value = '';
let p = document.createElement('p');
receive_.append(p);
p.innerHTML = "<span class = 'er'>" + data.user + "</span>" + ": " + data.msg;
p.style.textAlign = 'left';
p.style.backgroundColor = "blue";
p.style.paddingLeft = "2em";
};
//makes sure scroll stays at bottom
receive_.scrollTop = receive_.scrollHeight;
});
function addAnimation(){
newUser_text.classList.add("act");
}
let header = document.querySelector(".feedback");
$(document ).ready(function(){
$(msg_input).keypress(function() {
socket.emit('typing', user);
});
socket.on('typing', function(data){
header.innerHTML = data + ' is typing...'
})
})
编辑
好的,我要疯了,试图弄清楚为什么它不起作用。 因此,我变得绝望了,只是决定将我的整个项目发布到所有草率的荣耀中。
如果我可以获得帮助,那么我现在再次面临的问题是,只要用户键入,它就会出现在每个人身上。 广播不排除客户端。 再次感谢大家的帮助。
该文档指出:
要进行广播,只需添加广播标志即可发出和发送方法调用。 广播意味着向别人发送消息, 除了 启动它的套接字 以外 。
您的代码中可能还存在其他错误,但是socket.broadcast.emit
不会发送给发送方。
我只能推测是什么导致您认为socket.io无法正常工作。 也许您的user
变量对于所有套接字连接都可能是相同的,这就是为什么您认为广播正在向发出消息的套接字发出消息的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.