时间戳

首页 > 解决方案 > socket.io 连接问题

javascript - socket.io 连接问题

问题描述

我不断收到这个 GET /socket.io/?EIO=3&transport=polling&t=MfRfeJD 404 4.438 ms - 149 错误，我不知道它来自哪里。

我正在尝试使用 react、socket.io 和 express 将实时聊天集成到我的应用程序中，但我不断收到这个未找到套接字的错误。我不确定问题出在客户端还是服务器端。它似乎在尝试不断地轮询服务器，但正在返回 404。听起来 socket.io 没有运行，但对我来说一切正常。它也可能与路径有关，但我真的不知道。我尝试向 io 添加不同的路由，例如“ http://localhost:5000/ ”，但它仍然找不到套接字。

我显示页面，当我单击发送时显示消息，但我无法连接套接字。

在 app.js 中

    const express = require('express');

  const http = require('http')
    const bodyParser = require('body-parser')
    const socketIo = require('socket.io')

    var app = express();
    const server = http.createServer(app)
    const io = socketIo(server)

    var PORT = process.env.PORT || 5000;

    app.post('/', (req, res) => {
      const { Body, From} = req.body
      const message = {
        body: Body,
        from: From.slice(8),

      }
      io.emit('message', message)
      res.send(`
               <Response>
                <Message>Thanks for texting!</Message>
               </Response>
               `)
    })

    io.on('connection', socket => {
      socket.on('message', body => {
        socket.broadcast.emit('message', {
          body,
          from: socket.id.slice(8)
        })
      })
    })

    server.listen(PORT);

在 Chat.js 中

    import React from "react";
    import io from "socket.io-client";



    class Chat extends React.Component {
        constructor (props) {
          super(props)
          this.state = { messages: [] }
        }

        componentDidMount () {
          this.socket = io('http://localhost:5000/')
          this.socket.on('message', message => {
            this.setState({ messages: [message, ...this.state.messages] })
          })
        }

        handleSubmit = event => {
          const body = event.target.value
          if (event.keyCode === 13 && body) {
            const message = {
              body,
              from: 'Me'
            }
            this.setState({ messages: [message, ...this.state.messages] })
            this.socket.emit('message', body)
            event.target.value = ''
          }
        }

        render () {
          const messages = this.state.messages.map((message, index) => {
            return <li key={index}><b>{message.from}:</b>{message.body} </li>
          })
          return (
            <div>
               <h1>Admin Chat</h1>
              <input type='text' placeholder='Enter a message...' onKeyUp={this.handleSubmit} />
              {messages}
            </div>
          )
        }
      }



export default Chat;

标签： javascriptreactjssocket.io

解决方案

404 明确表示没有这样的页面

149 将是失败的行号，您正在导入其他代码，因此它可以位于第 149 行存在的任何其他代码上

i do see a maybe in app.js and the path 
 "app.post('/', (req, res) => {"        Refers to an absolute path
     try changing "http://localhost:5000/" 
       to "http://localhost:5000" or "http://localhost/:5000"

看起来最后的“/”将 5000 放在路径而不是端口中

--- 编辑 --- 仔细查看 GET /socket.io/?EIO=3&transport=polling&t=MfRfeJD

如果 chat.js 正在客户端上运行并连接到http://localhost:5000；

http://localhost/socket.io/?EIO=3&transport=polling&t=MfRfeJD将是尝试的连接

看起来客户端正在尝试连接回自身。

您如何设置客户端/服务器？

如果它们是单独的机器，这将寻找一个不存在的 url。

任何一种方式都发生在 socket.io 库中。

推荐阅读