Question

我当前正尝试在https://tuckermedia.org/livechat/域的Raspberry Pi上进行实时聊天，我正在使用服务Apache2。

当前，您可以选择用户名并发送消息，但是在发送消息时，会出现错误index.js:83 GET https://tuckermedia.org/socket.io/?EIO=3&transport=polling&t=N0S-wMw 404。由于此错误，连接到服务器的任何客户端都不会收到该消息。我目前不确定为什么会这样，您可以查看下面列出的我的脚本。

script.js（客户端）

const messageContainer = document.getElementById('message-container')
const messageForm = document.getElementById('send-container')
const messageInput = document.getElementById('message-input')

const name = prompt('Please enter a username:')
appendMessage('You have connected.')
socket.emit('new-user', name)

socket.on('chat-message', data => {
  appendMessage(`${data.name}: ${data.message}`)
})

socket.on('user-connected', name => {
  appendMessage(`${name} has connected.`)
})


messageForm.addEventListener('submit', e => {
  e.preventDefault()
  const message = messageInput.value
  appendMessage(`You: ${message}`)
  socket.emit('send-chat-message', message)
  messageInput.value = ''
})

function appendMessage(message) {
  const messageElement = document.createElement('p')
  messageElement.innerText = message
  messageContainer.append(messageElement)
}

server.js（服务器端）

const app = express();
const server = require("http").Server(app);
const io = require('socket.io')(server, {
    transports: ["websocket"]
});

const PORT = process.env.PORT || 3000
server.listen(PORT, () => {
    console.log("Server started at", PORT);
})

const users = {}

io.on('connection', socket  => {
  socket.on('new-user', name => {
    users[socket.id] = name
    socket.broadcast.emit('user-connected', name)
   })

  socket.on('send-chat-message', message => {
    socket.broadcast.emit('chat-message', { message: message, name: users[socket.id] })
  })

})

HTML

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Tucker Media Live Chat</title>
    <script defer src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
    <script defer src="script.js"></script>
    <link href="style.css" rel="stylesheet" type="text/css"/>
    <link rel="shortcut icon" href="#" />
  </head>
  <body>

    <!--Main Container-->
      <div id="chat"></div>
    <main>
  <header>
    <!--User Count and Title-->
    <h1>Tucker Media Live Chat</h1>
  </header>

  <!--Chat Section-->
  <section id="message-container">
    <p><strong>Tucker Bot:</strong> Chat is still under development... If you encounter an issues or bugs, please report them to either Landen or Logan.</p>
  </section>

  <!--Chat Input-->
  <form id = "send-container">
    <input type="text" placeholder="Message here..." id="message-input">
    <button>Send</button>
  </form>
</main>
  </body>
</html>

我目前正在使用nodemon和express.js运行服务器，如果您想访问该站点以自己查看控制台信息，可以在https://www.tuckermedia.org/livechat

谢谢！如果您有我未在此处提供的任何问题，请说几句！

无法加载资源|树莓派| Socket.io Web服务器托管

0 个答案: