我正在為一個學校專案構建這個聊天應用程式，并且我同時學習了多個教程，這就是導致我出現這個混亂代碼的原因，我一直堅持使用它。此時，當我用戶寫入訊息并發送時，它顯示給自己而不是其他人。那么如何讓訊息顯示給所有人呢？（注意：我想對收到的訊息使用不同的 css 類）。
客戶端代碼：
const socket = io('ws://localhost:8080');
const sendBtn = document.getElementById('sendBtn');
const messageInput = document.getElementById('messageInput');
const messagesContainer = document.getElementById('messagesContainer');
const chatBigContainer = document.getElementById('chatBigContainer');
sendBtn.addEventListener('click', () =>{
if(messageInput.value === ""){
return;
} else {
const text = messageInput.value;
socket.emit('message', text);
const divEl = document.createElement('div');
divEl.className = "your-message";
messagesContainer.appendChild(divEl);
const labelEl = document.createElement('label');
labelEl.innerHTML = "You";
divEl.appendChild(labelEl);
let messageSent = document.createElement('p');
messageSent.innerHTML = text;
divEl.appendChild(messageSent);
messageInput.value = "";
}
})
服務器端代碼：
const http = require('http').createServer();
const io = require('socket.io')(http, {
cors:{origin: "*" }
});
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('message', (message) => {
console.log(message);
socket.broadcast.emit('message', `${message}`);
});
});
http.listen(8080, () => console.log('listening on http://localhost:8080'));
uj5u.com熱心網友回復：
你需要寫socket.on在client side code這樣
socket.on("message", function (messageFromOtherUser) {
const divEl = document.createElement("div");
divEl.className = "otherUser-message";
messagesContainer.appendChild(divEl);
const labelEl = document.createElement("label");
labelEl.innerHTML = "otherUser";
divEl.appendChild(labelEl);
let messageSent = document.createElement("p");
messageSent.innerHTML = messageFromOtherUser;
divEl.appendChild(messageSent);
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/387190.html
標籤：javascript 节点.js 插座 网络应用程序 socket.io
上一篇：保留IP和主機名串列