套接字io连接被拒绝

时间:2019-05-17 01:15:20

标签: javascript node.js reactjs socket.io

当我尝试从服务器连接到客户端时,出现以下错误。我已经完全复制了代码,并认为我可能正在使用套接字io库的过时版本。有谁知道我错了什么或如何更新此代码? polling-xhr.js:269 GET http://localhost:6600/socket.io/?EIO=3&transport=polling&t=Mh3LzEk net :: ERR_CONNECTION_REFUSED

var app = require("express")();
var http = require("http").Server(app);
var io = require("socket.io")(http);

const port = 6600;

app.get("/", function(req, res) {
  res.sendFile(__dirname + "/index.html");
});

const getVisitors = () => {
  let clients = io.sockets.clients().connected;
  let sockets = Object.values(clients);
  let users = sockets.map(s => s.user);
  return users;
};

const emitVisitors = () => {
  io.emit("visitors", getVisitors());
};

io.on("connection", function(socket) {
  console.log("a user connected");

  socket.on("new_visitor", user => {
    console.log("new_visitor", user);
    socket.user = user;
    emitVisitors();
  });

  socket.on("disconnect", function() {
    emitVisitors();
    console.log("user disconnected");
  });
});

http.listen(port, function() {
  console.log(`listening on *:${port}`);
});

//这是我的客户

import React, { Component } from "react";
import { Table } from "reactstrap";
import axios from "axios";

import openSocket from "socket.io-client";

const socket = openSocket("http://localhost:6600");

class LiveVisitors extends Component {
  state = {
    visitors: []
  };

  componentWillMount() {
    axios.get("http://geoplugin.net/json.gp").then(res => {
      const {
        geoplugin_request,
        geoplugin_countryCode,
        geoplugin_city,
        geoplugin_region,
        geoplugin_countryName
      } = res.data;

      const visitor = {
        ip: geoplugin_request,
        countryCode: geoplugin_countryCode,
        city: geoplugin_city,
        state: geoplugin_region,
        country: geoplugin_countryName
      };

      socket.emit("new_visitor", visitor);

      socket.on("visitors", visitors => {
        this.setState({
          visitors: visitors
        });
      });
    });
  }

  getCountyFlag = countryCode =>
    `https://www.countryflags.io/${countryCode}/flat/64.png`;

  renderTableBody = () => {
    const { visitors } = this.state;
    return visitors.map((v, index) => {
      return (
        <tr key={index}>
          <td>{index + 1}</td>
          <td>{v.ip}</td>
          <td>
            <img src={this.getCountyFlag(v.countryCode)} />
          </td>
          <td>{v.city}</td>
          <td>{v.state}</td>
          <td>{v.country}</td>
        </tr>
      );
    });
  };

  render() {
    return (
      <React.Fragment>
        <h2>Live Visitors</h2>
        <Table>
          <thead>
            <tr>
              <th>#</th>
              <th>IP</th>
              <th>Flag</th>
              <th>City</th>
              <th>State</th>
              <th>Country</th>
            </tr>
          </thead>
          <tbody>{this.renderTableBody()}</tbody>
        </Table>
      </React.Fragment>
    );
  }
}

export default LiveVisitors;

0 个答案:

没有答案