想作一個聊天室功能的網頁
框架是用react
server 放在 iisnode托管
clien 則是放在iis托管

我試寫撰寫socket.io server and client 連線，卻一直無法連接上…

server 程式

var http = require('http');
var socketio = require('socket.io');
var express = require('express');
var app = express();
var port = process.env.PORT || 7020;

var server = http.createServer();
server.listen(7010);
var io = socketio(server);
io.path('/node/socket/socket.io');
console.log('io : ')
console.log(io)


app.listen(port);
console.log('Server API is runnning at ' + port);

app.get('/node/socket/fun/msg', function (req, res) {
    console.log('messages')
    let messages = '----------';
    res.send(messages);
})

//用 socket 方式建立連線
io.on('connection', function (socket) {
    console.log('user connected')
})

server webconfig (簡略)

<configuration>
  <system.webServer> 

    <handlers>
      <add name="iisnode" path="server.js" verb="*" modules="iisnode" />
   <add name="iisnode-socketio" path="server.js" verb="*" modules="iisnode" /> 
    </handlers>
     <rewrite>
       <rules>
         <rule name="fun">
           <match url="fun/*" />
           <action type="Rewrite" url="server.js" />
         </rule>
          <rule name="SocketIO" patternSyntax="ECMAScript">
    <match url="socket.io.+"/>
    <action type="Rewrite" url="server.js"/>
</rule> 
       </rules>
      
     </rewrite>
	 ...(略)
  </system.webServer>
</configuration>

client

import io from "socket.io-client";

export default function SignIn() {
  const classes = useStyles();
  // const {slogin , setLogin} = useState(false);
  const { register, handleSubmit, errors } = useForm();

  let history = useHistory();

  const [message, setMessage] = useState('');
   
  useEffect(() => {
    
    //  socket = io('http://主機的IP/node/socket/socket.io:7010');
    // client-side
const socket = io('http://主機的IP',{
  path: '/node/socket/socket.io'
});
    // socket.on('message', message => {
    //   setMessage(msgs => [ ...msgs, message ]);
    // });
    
   
}, []);


  ...(略)
 

  console.log(errors)
  return (
    <div classes='login'>
      <Container component="main" maxWidth="xs">


        <CssBaseline />
        <div className={classes.paper}>
          <Avatar className={classes.avatar}>
            <LockOutlinedIcon />
          </Avatar>
          <Typography component="h1" variant="h5">
            Sign in
        </Typography>
          <form noValidate onSubmit={handleSubmit(onSubmit)}>

            <div>
              <label htmlFor="user">Name</label>
              <input
                className={'inputstyle'}
                name="user"
                type="user"
                ref={register({ required: true })}
              />
              {errors.user && "帳號為必填"}
            </div>

            <div>

              <label htmlFor="Password">Password</label>
              <input
                className={'inputstyle'}
                name="Password"
                type="Password"
                ref={register({ required: true })}
              />
              {errors.Password && "密碼為必填"}
            </div>
            <Button
              className={'loginBtn'}
              type="submit"
              fullWidth
              variant="contained"
              color="primary"     
            >
              Sign In
          </Button>
            <Grid container>
              <Grid item xs>
                {/* <Link href="#" variant="body2">
                Forgot password?
              </Link> */}
              </Grid>
              <Grid item>
                {/* <Link href="#" variant="body2">
                {"Don't have an account? Sign Up"}
              </Link> */}
              </Grid>
            </Grid>
          </form>
        </div>
        <Box mt={8}>
          <Copyright />
        </Box>
      </Container>
      <div className="outerContainer">
    <div className="container">
      <button message={message}></button>
          
      </div>
    </div>
    </div>
  );
}

執行後出現的錯誤

polling-xhr.js:229 GET http://主機的ip/node/socket/socket.io/?EIO=4&transport=polling&t=NMrRdHg net::ERR_FAILED