繁体   English   中英

Broadcast.emit不排除Socket.IO中的发送者

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM