时间戳

首页 > 解决方案 > React Native 未连接到 Socket.io 套接字

sockets - React Native 未连接到 Socket.io 套接字

问题描述

我正在 react-native 上构建一个应用程序，并且想要实现 socket.io，但是由于某种原因我在这样做时遇到了麻烦。

这是我的服务器代码：

const express = require("express");
const app = express();
const server = require("http").createServer(app);
const io = require("socket.io").listen(server);
const port = 3000;

io.on("connection", socket => {
    console.log("User has connected!");
});

server.listen(port, () => console.log("Server has started"));

还有我的 React Native 代码（精简）：

import io from "socket.io-client";

export default class InstructorView extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visibleModal: null,
            modalTitle: "Test",
            course: {}
        }
    }

componentDidMount() {
    //Socket
    const socket = io("http://PC IP Address:3000");
    console.log("Component Did Mount"); 
}

render(){
    //code
}

在 componentDidMount() 方法中，“Component Did Mount”正在根据需要输出，但是，“用户已连接”和“服务器已启动”的日志都没有打印到控制台，我不确定为什么，正如我所遵循的一步一步的 YouTube 教程。提前致谢！

标签： socketsreact-nativewebsocketsocket.io

解决方案

服务器.js

var app = require("express")();
var server = require("http").Server(app);
var io = require("socket.io")(server);
server.listen(5000);
io.on("connection", socket => {
  console.log("socket id" + socket.id);
});

应用程序.js

import io from "socket.io-client/dist/socket.io.js";//<----import--
var e;
export default class App extends Component {
  constructor(props) {
    super(props);
    e = this;
    this.socket = io("http://PC IPAddress:5000", { jsonp: false });
  }
}

尝试使用此代码，它对我有用。

推荐阅读