客戶端未連接到服務器 Socket.IO

Question

嗨，我正在用 url http://localhost/Seminarska%20naloga%20NRSA/index.php?stran=chat 創建一個聊天網站一旦消息被提交，服務器就不會接收它，客戶端甚至不會連接到服務器。 服務器在 http://localhost:3000 上運行，當代碼在 index.html 文件中時，聊天可以正常運行，並且可以毫無問題地連接到服務器，但是當我將它放在名為 chat.html.php 的 php 文件中時，連接失敗。

HTML 代碼：

<ul id="messages"></ul>
    <form id="form" action="">
      <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    <script src="/Seminarska naloga NRSA/template/node_modules/socket.io/client-dist/socket.io.js"></script>
    <script>
    const socket = io("http://192.168.88.152:3000");

    var messages = document.getElementById('messages');
    var form = document.getElementById('form');
    var input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
        socket.emit('chat message', input.value);
        input.value = '';
        }
    });

    socket.on('chat message', function(msg) {
        var item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
    </script>

服務器代碼：

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");
const io = new Server(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/chat.html.php');
});

io.on('connection', (socket) => {
  console.log('a user connected');
});

io.on('connection', (socket) => {
    console.log('a user connected');
    socket.on('disconnect', () => {
      console.log('user disconnected');
    });
  });

  io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
      console.log('message: ' + msg);
    });
  });

  io.on('connection', (socket) => {
    socket.on('chat message', (msg) => {
      io.emit('chat message', msg);
    });
  });

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在控制台中，如果代碼位於 index.html 和 i go 至 http://logalhost:3000 中，則沒有錯誤或警告，ctah 完美運行。

Answer 1

這應該是你的客戶

<script src="/Seminarska naloga NRSA/template/node_modules/socket.io/client-dist/socket.io.js"></script>
<script>
const socket = io("http://192.168.88.152:3000");

var messages = document.getElementById('messages');
var form = document.getElementById('form');
var input = document.getElementById('input');

form.addEventListener('submit', function(e) {
  e.preventDefault();
  if (input.value) {
  socket.emit('SendMsg', input.value);
  input.value = '';
}
});

socket.on('RecieveMsg', msg => {
  var item = document.createElement('li');
  item.textContent = msg;
  messages.appendChild(item);
  window.scrollTo(0, document.body.scrollHeight);
});
</script>

這應該是你的服務器

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const io = require("socket.io")(server,
  cors: {
    origin: 'http://localhost',
    methods: ["GET", "POST"]
  }
);

app.get('/', (req, res) => {
  res.sendFile(__dirname+'/chat.html.php');
});

io.on('connection', (socket) => {
  console.log('a user connected');
  io.on('SendMsg', msg => {
    console.log('Message: ' + msg);
    io.emit('RecieveMsg', msg);
  });
  io.on('disconnect', () => {
    console.log('A user disconnected');
  })
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

您所有的io.on()函數都應該在io.on('connection')內，因為您希望服務器在連接后進行監聽。

希望這有幫助：D