Triggring events from react pusher js

Question

I am trying to build a crypto exchange chart-based project and for that, I am using the pusher js library for my react app. I am able to receive data from the server because of the event but I am trying to send a message from front to my backend server and i don't know how to send it from pusher js can anyone help me here's my code:

FrontEnd

import React, { useEffect, useState } from "react";
import Pusher from "pusher-js";
import axios from "axios";

const App = () => {
  const [message, setMessage] = useState("");
  const [username, setUsername] = useState("");
  const [showErr, setShowErr] = useState("");

  useEffect(() => {
    const pusher = new Pusher("APP_KEY", {
    cluster: "APP_CLUSTER",
    encrypted: true,
  });
 const channel = pusher.subscribe("subscribe");
 channel.bind("my-event", (data) => {
   console.log(data);
  });
 return () => {
   pusher.unsubscribe("subscribe");
 };
}, []);

const sendMessage = (e) => {
  e.preventDefault();
  const channelName = "subscribe";
  if (message.trim().length > 0) {
    let data = {
      username,
      message,
    };
    setShowErr(false);
    axios
      .post(`http://localhost:5001/message?channel=${channelName}`, data)
      .then(() => {
        setMessage("");
      });
  } else setShowErr(true);
};

return (
<div>
  <form className="inputContainer" onSubmit={(e) => sendMessage(e)}>
  <input
      type="text"
      className="inputElement"
      value={username}
      onChange={(e) => setUsername(e.target.value)}
    />
    <input
      type="text"
      className="inputElement"
      value={message}
      onChange={(e) => setMessage(e.target.value)}
    />
    <button className="inputBtn" type="submit">
      Send
    </button>
    {showErr && <div className="errorText">Enter your message</div>}
  </form>
</div>
);
};

export default App;

BackEnd Code

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const app = express();
const Pusher = require("pusher");

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(cors());

app.use("/static", express.static("public"));

app.get("/", (req, res) => {
  res.send("Welcome sir! hope your day is good.");
});

const pusher = new Pusher({
  appId: "APP_ID",
  key: "APP_KEY",
  secret: "APP_SECRET",
  cluster: "APP_CLUSTER",
  useTLS: true,
});

pusher.trigger("subscribe", "my-event", {
  message: "hello world",
});

app.post("/message", (req, res) => {
  const payload = req.body;
  pusher.trigger(req.query.channel, "my-event", payload);
  res.send(payload);
});

const port = 5001;

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

I want to send a message from the socket, not from Axio's request can anyone help me

Answer 1

import React, { useEffect, useState } from "react";
import Pusher from "pusher-js";
import axios from "axios";

const App = () => {
  const [message, setMessage] = useState("");
  const [username, setUsername] = useState("");
  const [showErr, setShowErr] = useState("");

  useEffect(() => {
    const pusher = new Pusher("APP_KEY", {
    cluster: "APP_CLUSTER",
    encrypted: true,
  });
 const channel = pusher.subscribe("subscribe");
 channel.bind("my-event", (data) => {
   console.log(data);
  });
 return () => {
   pusher.unsubscribe("subscribe");
 };
}, []);

const sendMessage = (e) => {
  e.preventDefault();
 channel.trigger('client-my-event', { message: 'Hello, Pusher!' });
};

return (
<div>
  <form className="inputContainer" onSubmit={(e) => sendMessage(e)}>
  <input
     type="text"
     className="inputElement"
     value={username}
     onChange={(e) => setUsername(e.target.value)}
   />
  <input
     type="text"
     className="inputElement"
     value={message}
     onChange={(e) => setMessage(e.target.value)}
   />
   <button className="inputBtn" type="submit">
     Send
   </button>
   {showErr && <div className="errorText">Enter your message</div>}
 </form>
 </div>
});
export default App;

Instead of using Axios to send the message to the backend you can use trigger that might help in this situation