我正在嘗試為學校專案創建一個小聊天應用程式，但我遇到了一個小問題，因為我對 socket.io // node.js（一般編碼）真的很陌生。英語不是我的母語，所以我發現很難從教程中真正理解它是如何作業的。現在我有 2 個 css 類，一個用于發送的訊息，一個用于接收的訊息。我如何才能讓課程以正確的方式應用每條訊息？我如何檢查哪些訊息是我發送的，哪些是從其他用戶那里收到的？對我來說真的不清楚。
服務器端代碼：
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);
io.emit('message', `${message}`);
});
});
http.listen(8080, () => console.log('listening on http://localhost:8080'));
客戶端代碼：
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');
socket.on('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);
})
sendBtn.addEventListener('click', () =>{
if(messageInput.value === ""){
return;
} else {
const text = messageInput.value;
socket.emit('message', text);
messageInput.value = "";
}
})
uj5u.com熱心網友回復：
據我了解，當您發送任何文本時，您并沒有創建任何元素。相反，您向所有人發出相同的資訊：
io.emit('message', `${message}`);
這樣你就會認為你實際上是在為發送和接收創建 HTML div。首先你的服務器代碼應該是：
socket.broadcast.emit('message', `${message}`);
（這會發送給除發件人之外的所有人，并且應該適用于您有 2 個用戶的簡單案例。稍后您將需要房間）
這將表明您在發送訊息時實際上并未創建任何元素。
socket.on('message', text => {
})
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 = "";
}
})
用你的類名和標簽替換上面的
uj5u.com熱心網友回復：
為什么你有兩個類來發送和接收訊息？socket.emit將向所有客戶端發送訊息，然后您可以附加該訊息。
從 socket.io 聊天教程 ( 
其次，如果你想檢查哪些用戶是哪些，你可以socket.id為用戶分配一個，就像這樣。
io.on('connection', function(socket) {
console.log(`A user connected. ID: ${socket.id}`)
socket.on('disconnect', function() {
console.log(`A user disconnected. ID: ${socket.id}`);
});
});這樣，每個用戶都有一個唯一的套接字 ID。也許這可以幫助你？我有點不確定你在問什么。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/387191.html
標籤：javascript 节点.js 插座 网络套接字 socket.io