如何通过不同的API通过套接字io连接服务器和客户端?

时间:2020-06-29 05:45:29

标签: node.js reactjs socket.io

在此代码中,客户端与服务器之间建立了套接字连接,该套接字连接每秒发送当前时间戳。一切正常。唯一的问题是,在客户端,我想使用端点作为http://127.0.0.1:4001/api而不是http://127.0.0.1:4001/,服务器端应该怎么做才能做到这一点?

服务器端---- app.js

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

const port = process.env.PORT || 4001;
const index = require("./index");

const app = express();
app.use(index);

const server = http.createServer(app);

const io = socketIo(server);

let interval;

io.on("connection", (socket) => {
  console.log("New client connected");
  if (interval) {
    clearInterval(interval);
  }
  interval = setInterval(() => getApiAndEmit(socket), 1000);
  socket.on("disconnect", () => {
    console.log("Client disconnected");
    clearInterval(interval);
  });
});

const getApiAndEmit = socket => {
  const response = new Date();
  // Emitting a new message. Will be consumed by the client
  socket.emit("FromAP", response);
};

server.listen(port, () => console.log(`Listening on port ${port}`));

服务器端---- index.js

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.send({ response: "I am alive" }).status(200);
});

router.get("/api", (req, res) => {
    res.send({ response: "I am jai" }).status(200);
  });

module.exports = router;

有力的一面--- app.js

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:4001/";

function App() {
  const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.on("FromAP", data => {
      setResponse(data);
    });
  }, []);

  return (
    <p>
      It's <time dateTime={response}>{response}</time>
    </p>
  );
}

export default App;

0 个答案:

没有答案
相关问题