platzidev / socket.io-react Goto Github PK

When using Webpack+Babel, due to the way SocketProvider and socketConnect are re-exported here, they can't be imported with import { SocketProvider, socketConnect } from 'socket.io-react' but only by importing the default export and then de-structuring that object.

Thank you for the great component! 👍

It's mentioned on package that there is no dependency :

But after installation it gave me error :
├── UNMET PEER DEPENDENCY [email protected]
├── UNMET PEER DEPENDENCY [email protected]
└── [email protected]

While if you see my package json :
"react": "15.4.2",
"socket.io-client": "2.0.3",
"socket.io-react": "1.2.0",

All the required packages are already there. Please test your plugin once before publishing.

Hi, I'm trying to integrate this package into my React app.

I'm using webpack and I get this error when I build:

ERROR in my-app.0.0.1.js from UglifyJs
SyntaxError: Unexpected token: name (SocketProvider)

Do you have any idea of the reason?

Gracias

I did "npm start" it seems no such script yet?!

I'm having trouble using this library with typescript because it doesn't provide it's own type definitions and there isn't a @types/socket.io-react.

Is this something that's possible to add in the future?

Hi,

I followed your instruction, but failed to config, because I cannot import io from 'socket.io-client'; while going for SocketProvider(socket?). I was afraid socket.io-react didn't exist in node_modules folder?

My react project is currently using "react": "^18.2.0"

The installation of the socket io client throws a compatibility error.

Given the error, I think the socket.io-client package is only compatible with the react version till 15.6.1

I guess this means, I force the installation or downgrade my react version which I think is not the right way to go.

The socket client should be able to work with the latest react versions.

I'm using the npm published version, and it is not updated with the PropTypes thingy

I am trying to use socket.io-react with create-react-app. I have attached node backend at port 3001 and create-react-app development server at port 3000.

My code looks like -

// index.js
import {SocketProvider} from 'socket.io-react';
import io from 'socket.io-client';

import App from './components/app/App.js';
import React from 'react';
import ReactDOM from 'react-dom';

const socket = io('http://localhost:3001');
socket.on('message', msg => console.log(msg));

ReactDOM.render(
  <SocketProvider socket={socket}>
    <App />
  </SocketProvider>,
  document.getElementById('root')
);

// server.js
const app = require('express')();
const path = require('path');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const socketServer = require('http').Server(app);
const io = require('socket.io')(socketServer);

const Stock = require('./models/stock.js');
const routes = require('./app/routes.js');

// loads all custom environments variables
if (process.env.NODE_ENV !== "production") {
  require('dotenv').config();
}

socketServer.listen(3002);
app.set('port', (process.env.PORT || 3001));

io.on('connection', function(socket) {
        console.log('a user connected, id ' + socket.id);
        socket.on('disconnect', function() {
            console.log('a user disconnected, id '  + socket.id);
        })
})

...

and I am getting the following error in console -

GET http://localhost:3001/socket.io/?EIO=3&transport=polling&t=Ldg56In 404 (Not Found)
Request.create @ polling-xhr.js:261
Request @ polling-xhr.js:166
XHR.request @ polling-xhr.js:93
XHR.doPoll @ polling-xhr.js:123
Polling.poll @ polling.js:118
Polling.doOpen @ polling.js:63
Transport.open @ transport.js:80
Socket.open @ socket.js:240
Socket @ socket.js:119
Socket @ socket.js:29
Manager.open.Manager.connect @ manager.js:213
(anonymous) @ manager.js:527

localhost/:1 XMLHttpRequest cannot load http://localhost:3001/socket.io/?EIO=3&transport=polling&t=Ldg56In. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 404.

What should i do to make the setup work and what is the process.env.SOCKET_URL?

Thanks!