johnkingzy/index.tsx

## index.tsx
import Head from "next/head";
import { Component, useEffect } from "react";
import { io } from "socket.io-client";

class Home extends Component {
  public socket: any;
  constructor(props: any) {
    super(props);
  }

  componentDidMount() {
    console.log("got here");
    this.socket = io("http://127.0.0.1:3000", {
      path: "/v1",
      // transports: ["websocket"],
      rejectUnauthorized: false, // ssl disabled
      extraHeaders: {
        // WARN: this will be ignored in a browser - https://socket.io/docs/v3/client-initialization/#extraHeaders
        authorization: `Bearer ${window.localStorage.getItem('token')}`
      }
    });

    // client-side
    this.socket.on("connect", () => {
      console.log("connected ✅ ----> id: ", this.socket.id);
    });

    this.socket.on("disconnect", () => {
      console.log("disconnected ❌ ----> id: ", this.socket.id); // undefined
    });

    this.socket.on("read:active:wallet:balance", (data: any) => {
      console.log("data from server", data);
    });
  }

  alertEvent = () => {
    this.socket.emit("send:active:wallet:balance");
  };
  render() {
    return (
      <div>
        <Head>
          <title>Test App</title>
        </Head>
        <h1>Hello</h1>
        <button onClick={this.alertEvent}>Send wallet balance</button>
      </div>
    );
  }
}

export default Home;
	import Head from "next/head";
	import { Component, useEffect } from "react";
	import { io } from "socket.io-client";

	class Home extends Component {
	public socket: any;
	constructor(props: any) {
	super(props);
	}

	componentDidMount() {
	console.log("got here");
	this.socket = io("http://127.0.0.1:3000", {
	path: "/v1",
	// transports: ["websocket"],
	rejectUnauthorized: false, // ssl disabled
	extraHeaders: {
	// WARN: this will be ignored in a browser - https://socket.io/docs/v3/client-initialization/#extraHeaders
	authorization: `Bearer ${window.localStorage.getItem('token')}`
	}
	});

	// client-side
	this.socket.on("connect", () => {
	console.log("connected ✅ ----> id: ", this.socket.id);
	});

	this.socket.on("disconnect", () => {
	console.log("disconnected ❌ ----> id: ", this.socket.id); // undefined
	});

	this.socket.on("read:active:wallet:balance", (data: any) => {
	console.log("data from server", data);
	});
	}

	alertEvent = () => {
	this.socket.emit("send:active:wallet:balance");
	};
	render() {
	return (
	<div>
	<Head>
	<title>Test App</title>
	</Head>
	<h1>Hello</h1>
	<button onClick={this.alertEvent}>Send wallet balance</button>
	</div>
	);
	}
	}

	export default Home;