【问题标题】:Broadcast.emit not excluding sender in Socket.IOBroadcast.emit 不排除 Socket.IO 中的发送者
【发布时间】:2018-06-23 08:41:22
【问题描述】:

尝试使用 socket.io 和 javascript 显示“用户正在输入”消息。认为这将像广播事件(在我的情况下是输入字段上的按键)一样简单,然后将数据复制到 h4 标签。

问题在于广播。emit 将“用户正在输入”文本发送给每个客户端,包括发送者。我将在下面粘贴我的代码的 sn-p。提前谢谢你。

**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...'
  })
})

编辑

好吧,伙计们,我要发疯了,想弄清楚为什么这不起作用。因此,我越来越绝望,所以我决定发布我的整个项目,带着它所有的草率荣耀。

如果我能得到一些帮助,那么我现在面临的问题是,每当用户键入时,它就会出现在每个人身上。广播不排除客户端。再次感谢所有提供帮助的人。

【问题讨论】:

  • 仅供参考,我不建议您对发送到客户端和服务器的消息使用相同的消息名称。这很快就会变得非常混乱。

标签: javascript html node.js socket.io


【解决方案1】:

documentation 声明:

要广播,只需添加一个广播标志来发出和发送方法 来电。广播意味着向其他所有人发送消息除了 用于启动它的套接字

您的代码中可能有其他错误,但socket.broadcast.emit 不会发送给发件人。

我只能推测是什么导致您认为 socket.io 无法正常工作。也许您的 user 变量对于您的所有套接字连接可能都是相同的,这就是为什么您认为广播正在发送到发出消息的套接字。

【讨论】:

  • 谢谢,我会重新评估我的用户变量,如果有任何变化,请与您联系。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-05-16
  • 1970-01-01
  • 2014-07-28
  • 1970-01-01
  • 2023-02-01
  • 1970-01-01
  • 2021-04-22
相关资源
最近更新 更多