客户端未连接到服务器 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