【发布时间】: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