javascript - Socket not working between react and node.js

Question

I am working on a React and node socket.io project where I am simply sending data from file through sockets and recieving it in react.I am able to recieve the data in the server but not in react. Whenever I put some changes in my test.txt file,the server shows the changes in console but the react app is not able to show that. Need some help.Here's the code:

socketClient.js

const fs=require('fs')
var io = require('socket.io-client');
var socket = io.connect('http://localhost:3000', {reconnect: true});
var prev=""
// Add a connect listener
function getDifference(a, b)
{
    var i = 0;
    var j = 0;
    var result = "";

    while (j < b.length)
    {
     if (a[i] != b[j] || i == a.length)
         result += b[j];
     else
         i++;
     j++;
    }
    return result;
}
socket.on('connect', function (socket) {
    console.log('Connected!');
});
fs.watchFile("test.txt",function(current, previous) {
    console.log("File changed!");
    file = fs.readFileSync("test.txt");
    console.log("file"+String(file));
    console.log("prev"+String(prev));
    var output=getDifference(String(prev),String(file));
    prev=file
    socket.emit("log","me",String(output))
    
    
});

socketServer.js

const app=require('express')();
const server=require('http').createServer(app)
var io= require("socket.io")(server,{ cors: { origin: "192.168.0.6:3001", credentials: true } }); 

io.sockets.on('connection', function (socket) {              
    // socket.broadcast.emit('logging', {message: "hey"}); 
    socket.on('log', function (from, msg) {
        console.log('MSG', from, ' saying ', msg);
      });// we emit an event
}); 


server.listen(3000,function(){
console.log("Listening on 3000");
});

Here's my react app:

import React, { useState, useEffect } from "react";
import socketIOClient from "socket.io-client";
const ENDPOINT = "http://192.168.0.6:3000"; //my socket url

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

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
  
    socket.on("log",{ transports: ['websocket', 'polling', 'flashsocket'] }, data => {
      setResponse(data);
    });
  }, []);

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

export default App;

How to make this work? thanks for help

标签： javascriptnode.jsreactjssocket.io