Итак, в основном я создал базовое приложение для чата, используя HTML, CSS и JavaScript. Я также использую Socketio, чтобы я мог сделать приложение чата в реальном времени. Проблема в том, что я не могу выяснить, как я могу сделать это приложение чата двумя - способ, то есть пользователь может подключиться только к одному пользователю. Прямо сейчас все могут соединиться друг с другом.
Вот пример HTML -кода и код JavaScript. :
Примечание: я запускаю это с Node Server.js для запуска моей программы. : < /p>
Document
Join Chatroom
Username
Join
Chatroom
Exit
Send
< /code>
(function() {
const app = document.querySelector(".app");
const socket = io();
let uname;
app.querySelector(".join-screen #join-user").addEventListener("click", function() {
let username = app.querySelector(".join-screen #username").value;
if (username.length == 0) {
return;
}
socket.emit("newuser", username);
uname = username;
app.querySelector(".join-screen").classList.remove("active");
app.querySelector(".chat-screen").classList.add("active");
});
app.querySelector(".chat-screen #send-message").addEventListener("click", function() {
let message = app.querySelector(".chat-screen #message-input").value;
if (message.length == 0) {
return;
}
renderMessage("my", {
username:uname,
text:message
})
socket.emit("chat", {
username:uname,
text:message
})
app.querySelector(".chat-screen #message-input").value = "";
});
app.querySelector(".chat-screen #exit-chat").addEventListener("click", function() {
socket.emit("exituser", uname);
window.location.href = window.location.href;
})
socket.on("update",function(update) {
renderMessage("update", update);
})
socket.on("chat",function(message) {
renderMessage("other", message);
})
function renderMessage(type,message) {
let messageContainer = app.querySelector(".chat-screen .messages");
console.log(type)
if (type == "my") {
let el = document.createElement("div");
el.setAttribute("class","message my-message");
el.innerHTML = `
You
${message.text}
`;
messageContainer.appendChild(el);
} else if (type == "other") {
let el = document.createElement("div");
el.setAttribute("class","message other-message");
el.innerHTML = `
${message.username}
${message.text}
`;
messageContainer.appendChild(el);
} else if (type == "update") {
let el = document.createElement("div");
el.setAttribute("class","update");
el.innerHTML = message;
messageContainer.appendChild(el);
}
//scroll the chat to the end.
messageContainer.scrollTop = messageContainer.scrollHeight - messageContainer.clientHeight;
};
})();
< /code>
I appreciate any pointers and/or tips you may give.
Honestly, I do not have that much internet knowledge, so, I was pretty clueless on how to go about this.
Подробнее здесь: https://stackoverflow.com/questions/796 ... pp-two-way
