【发布时间】：2021-03-08 21:41:54
【问题描述】：
我和姐姐去参加90天挑战。
我要她给我画点东西（她是一名平面设计师，正在学习用 iPad 创作一些画作，而我正在学习编码）。这就是我们想要激励自己提高技能的方式。 :) 也许这会激励某人..
我面临的挑战是做一个简单的聊天应用程序，这样我们就可以更改一些短信 - 仅此而已。
我做了一些研究，下载了 node.js（以前从未使用过），下载了 socket.io，并借助互联网上的教程构建了一些东西。
当我在本地运行此应用程序时，它工作正常 - 我可以从浏览器向浏览器发送消息。
我尝试使用 xampp 来托管它，以便我们可以互相输入一些内容，但它不起作用 - 这就是目标。
我已经添加了 IIS 规则（如果有问题的话），我对防火墙进行了更改，添加了打开端口 3000 的例外，但它仍然不起作用。
我收到错误 400 或 io 未定义。
我认为它超出了我的技能 - 我太新手了，但我愿意做任何事情来通过这个挑战。
请检查以下代码。我将不胜感激任何有助于解决问题的建议或线索。
HTML 代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- font awesome link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"
integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA=="
crossorigin="anonymous" />
<!-- google fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script defer src="http://localhost:3000/socket.io/socket.io.js"></script>
<script defer src="./script.js"></script>
<title>Chat</title>
</head>
<body>
<section id="chatWindow">
</section>
<form id="sendMessage">
<input type="text" id="messageText">
<button type="submit" id="sendMessageBtn"><i class="far fa-paper-plane"></i></button>
</form>
</body>
</html>
server.js 代码：
const io = require('socket.io')(3000);
const users = {}
io.on('connection', socket => {
socket.on('new-user', name => {
users[socket.id] = name;
socket.broadcast.emit('user-connected', name);
})
socket.on
socket.on('send-chat-message', message => {
socket.broadcast.emit('chat-message', {
message: message,
name: users[socket.id]
});
console.log(message);
})
socket.on('disconnect', () => {
socket.broadcast.emit('user-disconnected', users[socket.id]);
delete users[socket.id];
})
})
script.js 代码：
const messageForm = document.getElementById('sendMessage');
const chatWindow = document.getElementById('chatWindow');
const messageInput = document.getElementById('messageText');
const name = prompt("Nickname:");
addMessage(`${name} Welcome!`);
socket.emit('new-user', name);
socket.on('chat-message', data => {
addMessage(`${data.name} : ${data.message}`);
});
socket.on('user-connected', name => {
addMessage(`${name} you have joined`);
});
socket.on('user-disconnected', name => {
addMessage(`${name} user disconnected form the server`);
});
messageForm.addEventListener('submit', e => {
e.preventDefault();
const message = messageInput.value;
addMessage(`Ty : ${message}`);
socket.emit('send-chat-message', message);
messageInput.value = '';
});
function addMessage(message) {
const chatMessage = document.createElement('div');
const addUserName = document.createElement('h3');
chatMessage.classList.add("message");
chatMessage.innerText = message;
chatWindow.append(chatMessage);
}```
【问题讨论】：
标签： javascript node.js socket.io localhost chat