Сокет не слушает с React Native и Express - PullRequest
0 голосов
/ 22 октября 2018

НИЖЕ МОБИЛЬНЫЙ ПОБОЧНЫЙ КОД МОЖЕТ РАБОТАТЬ НА IOS И ОДНОМЕРОМ ОДНАКО ПОЛУЧАЕТ ВНИМАНИЕпроснись, и таймеры могут быть вызваны только ......

Передав в ConnectionConfig, я могу получить сокеты, работающие на моем Android и IOS симуляторе.Однако вместо этого я получаю предупреждение.Несмотря на то, что я закомментировал Reconnection, ReconnectionDelay и ReconnectionAttempts, я все еще получаю эти предупреждения.Кто-нибудь с опытом в этом и может поделиться?

import React from "react";
import { Text, View, Button } from "react-native";
import SocketIO from "socket.io-client";

const connectionConfig = {
  // jsonp: false,
  // reconnection: true,
  // reconnectionDelay: 100,
  // reconnectionAttempts: 100000,
  transports: ["websocket"] // you need to explicitly tell it to use websockets
};

export default class HomeScreen extends React.Component {
  constructor() {
    super();
    this.socket = SocketIO("http://192.168.0.182:3000", connectionConfig);
    // this.socket = SocketIOClient("http://localhost:3000");
    this.socket.on("connect", () => {
      console.log("connected to server");
    });
    this.socket.emit("channel1", "Channel1 emitting");
  }

  btnPress = () => {
    console.log("Pressed");
    this.socket.emit("channel1", "Emitting when pressing button");
  };

  render() {
    return (
      <View>
        <Text>Hey</Text>
        <Button title="Emit" onPress={this.btnPress} />
      </View>
    );
  }
}

НИЖЕ МОБИЛЬНОГО КОДА СТОРОНЫ НЕ МОЖЕТ РАБОТАТЬ ДЛЯ МЕНЯ

Я пытаюсь реализовать базовый сокет с реагировать на родной навнешний интерфейс и экспресс на бэкэнде.

Мои коды ниже не работают.Я отправил некоторое сообщение от Reaction-native, но серверная сторона, похоже, не слушает, так как нет журнала консоли.

Кто-нибудь может указать на мою ошибку?Спасибо

React-Native

import React from "react";
import { View, Text } from "react-native";
import SocketIOClient from "socket.io-client";

class HomeScreen extends React.Component {
  constructor(props) {
    super(props);

    this.socket = SocketIOClient("http://localhost:3000");

    this.socket.emit("channel1", "Hi Server");
  }

  render() {
    return (
      <View>
        <Text>Home</Text>
      </View>
    );
  }
}

export default HomeScreen;

Express и Node

    const express = require("express");
const path = require("path");
const http = require("http");
const socketIO = require("socket.io");

const publicPath = path.join(__dirname, "../public");
const port = process.env.PORT || 3000;

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

const { generateMessage } = require("./utils/message");

app.use(express.static(publicPath));

// Server listens to Client Connected
io.on("connection", socket => {
  console.log("New User Connected");

  //! Server emits to Client
  // socket.emit("newMessage", generateMessage('Admin', 'Welcome!!'));

  //! Server emits to Client
  socket.emit("welcome", generateMessage("Admin", "Welcome to the Chat App!!"));

  //! Server broadcast to Other Clients
  socket.broadcast.emit(
    "welcome",
    generateMessage("Admin", "New User Joined!!")
  );

  //! Server Listing to Client Event
  socket.on("createMessage", message => {
    console.log("createMessage", message);

    //! Emit to All Clients upon Server Listening
    io.emit("newMessage", generateMessage(message.from, message.text));

    //! Broadcast to All Clients (except emitter) upon Server Listening
    socket.broadcast.emit(
      "newMessage",
      generateMessage(message.from, message.text)
    );
  });

  socket.on("channel1", message => {
    console.log("channel1", message);
  });

  //! Listening to Client then Server Acknowledging
  socket.on("createMessageWithAcknowledgement", (message, callback) => {
    console.log("createMessageWithAcknowledgement", message);

    //! Emit to All Clients upon Server Listening
    io.emit("newMessage", generateMessage(message.from, message.text));
    callback({ admin: "Jack", role: "admin" });
  });

  //! Server listens to Client Disconnect
  socket.on("disconnect", () => {
    console.log("User Disconnected");
  });
});

server.listen(port, () => {
  console.log(`Server is up on port ${port}!`);
});

Ответы [ 2 ]

0 голосов
/ 23 октября 2018

РАБОЧЕЕ РЕШЕНИЕ

РЕАГИРУЮЩАЯ РОДИЛЬНАЯ

import React from "react";
import { Text, View, Button } from "react-native";
import SocketIO from "socket.io-client";

const connectionConfig = {
  // jsonp: false,
  // reconnection: true,
  // reconnectionDelay: 100,
  // reconnectionAttempts: 100000,
  transports: ["websocket"] // you need to explicitly tell it to use websockets
};

export default class HomeScreen extends React.Component {
  constructor() {
    super();
    this.socket = SocketIO("http://192.168.0.182:3000", connectionConfig);
    // this.socket = SocketIOClient("http://localhost:3000");
    this.socket.on("connect", () => {
      console.log("connected to server");
    });
    this.socket.emit("channel1", "Channel1 emitting");
  }

  btnPress = () => {
    console.log("Pressed");
    this.socket.emit("channel1", "Emitting when pressing button");
  };

  render() {
    return (
      <View>
        <Text>Hey</Text>
        <Button title="Emit" onPress={this.btnPress} />
      </View>
    );
  }
}

УЗЕЛ И ЭКСПРЕСС-СЕРВЕР

const express = require("express");
const path = require("path");
const http = require("http");
const socketIO = require("socket.io");

const publicPath = path.join(__dirname, "../public");
const port = process.env.PORT || 3000;

const app = express();
const server = http.createServer(app);
const io = socketIO(server, {
      pingTimeout: 30000,
      pingInterval: 30000
    });

const { generateMessage } = require("./utils/message");

app.use(express.static(publicPath));

// Server listens to Client Connected
io.on("connection", socket => {
  console.log("New User Connected");

  //! Server emits to Client
  // socket.emit("newMessage", generateMessage('Admin', 'Welcome!!'));

  //! Server emits to Client
  socket.emit("welcome", generateMessage("Admin", "Welcome to the Chat App!!"));

  //! Server broadcast to Other Clients
  socket.broadcast.emit(
    "welcome",
    generateMessage("Admin", "New User Joined!!")
  );

  //! Server Listing to Client Event
  socket.on("createMessage", message => {
    console.log("createMessage", message);

    //! Emit to All Clients upon Server Listening
    io.emit("newMessage", generateMessage(message.from, message.text));

    //! Broadcast to All Clients (except emitter) upon Server Listening
    socket.broadcast.emit(
      "newMessage",
      generateMessage(message.from, message.text)
    );
  });

  socket.on("channel1", message => {
    console.log("channel1", message);
  });

  //! Listening to Client then Server Acknowledging
  socket.on("createMessageWithAcknowledgement", (message, callback) => {
    console.log("createMessageWithAcknowledgement", message);

    //! Emit to All Clients upon Server Listening
    io.emit("newMessage", generateMessage(message.from, message.text));
    callback({ admin: "Jack", role: "admin" });
  });

  //! Server listens to Client Disconnect
  socket.on("disconnect", () => {
    console.log("User Disconnected");
  });
});

server.listen(port, () => {
  console.log(`Server is up on port ${port}!`);
});

При добавлении ниже в код вашей стороны на сервере будет исправлено предупреждение таймера.(Я уже включил приведенную ниже поправку в мое решение для кода выше)

const io = socketIO(server, {
  pingTimeout: 30000,
  pingInterval: 30000
});
0 голосов
/ 22 октября 2018
websocket.on("connection", socket => {
  // The event will be called when a client is connected.
  console.log("A client just joined on", socket.id);

  // We listen to socket events after a connection has been made
  socket.on("channel1", data => {
    console.log("Greetings", data);
  });

  socket.on("newMessage", message => {
    console.log(message);
  });
});
...