react-native colyseus.js 0.11.0 error

[lavren1974]

package.json
...

"dependencies": {
    "buffer": "^5.4.0",
    "colyseus.js": "^0.11.0",
    "react": "16.8.6",
    "react-native": "0.60.5"
  },

......

import React, { Component } from 'react';
//import Board from './Board';
//import './css/board.css';
import * as Colyseus from "colyseus.js";
import { AsyncStorage, View, Text } from 'react-native';

import { Buffer } from "buffer";
window.localStorage = AsyncStorage;
global.Buffer = Buffer;


export default class Game extends Component {

    constructor(props) {
        super(props);

        this.colyseus = new Colyseus.Client('ws://31.173.240.80:2567')
        this.colyseus.joinOrCreate("gamebot")

/*
        this.colyseus.joinOrCreate("gamebot").then(room => {
            console.log("joined successfully", room);
        }).catch(e => {
            console.error("join error", e);
        });
*/

[endel]

Hi @lavren1974, this doesn't sound to be related to Colyseus.

This error is related to some native Java code. Colyseus doesn't provide any native code, it's all written in JavaScript.

[lavren1974]

Removed all unnecessary, the error is repeated ... On 0.10.8 everything works!

import React, { Component } from 'react';
import { AsyncStorage, AppRegistry, Text, View } from 'react-native';
//import Game from './src/components/Game/Game';
//import HelloWorldApp from './src/components/Game/Hello';
import * as Colyseus from "colyseus.js";
import { Buffer } from "buffer";

window.localStorage = AsyncStorage;
global.Buffer = Buffer;

export default class App extends Component {

  constructor(props) {
    super(props);

    this.colyseus = new Colyseus.Client('ws://31.173.241.93:2567')
    this.colyseus.joinOrCreate("gamebot")

  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>

      </View>
    );
  }
}

AppRegistry.registerComponent('mobile', () => App);

[lavren1974]

I'll try to lower the versions react-native ... I’ll give you some results ...

[lavren1974]

When rolling back to version 0.59.8 react native, the same error ...
Unfortunately, upgrading to version 0.11.0 is still premature

[lavren1974]

Perhaps if there is time, I will look at your code, although it will be difficult ... If I fix it, I will definitely tell you ...

[lavren1974]

I want to experiment with code ... How do you compile code? I encoded a little with typescript (I write mostly in golang ...), but compiled with grunt or gulp ...

[lavren1974]

Я хочу поэкспериментировать с кодом... Как вы компилируете код? Я немного кодировал с typescript (пишу в основном на golang...), но компилировал с помощью grunt или gulp...

[lavren1974]

С английским не очень... через переводчик...

[lavren1974]

Ok!
npm install webpack -g
npm install webpack-cli -g
npm run build

[lavren1974]

There may be a problem in the httpie module in the Client.js file 152 line. There is no error, but there is no connection ... While I rest ...

[endel]

hey @lavren1974, interesting. I'm using httpie@^2.0.0-next.2, which has support for the browser environment. I do not have a handy react-native set-up at the moment to test this out. I think a good idea would be to test this library in isolation without Colyseus to check what the issue may be, then.

[lavren1974]

Good! Tomorrow I will work on it ...

[okcompewter]

Hi @lavren1974 or @endel , have you had any luck with this? I see the same error message. I'm trying to create a client and join a room using colyseus.js@0.11.6, using the functional component (non-class) approach in React Native. As soon as I add the client.join, it breaks.

import React, { useEffect } from "react"
import { observer } from "mobx-react-lite";
import { View } from "react-native"
import { NavigationScreenProps } from "react-navigation"

import * as Colyseus from "colyseus.js";
import { AsyncStorage } from 'react-native';
import { Buffer } from "buffer";
window.localStorage = AsyncStorage;
global.Buffer = Buffer;

export interface MapScreenProps extends NavigationScreenProps<{}> {}

export const MapScreen: React.FunctionComponent<MapScreenProps> = observer((props) => {
  let client: any;

  useEffect(() => {
    client = new Colyseus.Client('ws://localhost:2567');
    onConnection();
  });

  const onConnection = () => {
    client.join('cell-b2').then(room => {
      console.tron.log(room.sessionId, "joined", room.name);
    }).catch(e => {
        console.tron.log("JOIN ERROR", e);
    });
  }

  return (
    <View/>
  )
})

[endel]

Probably related: axios/axios#1938

[endel]

This has been fixed on httpie@^2.0.0-next.3 (lukeed/httpie#21)

Please remove your package-lock.json and node_modules and install them again. If you have build your expo project recently, please also use expo --clean to clear the build cache.

[findolor]

Hey Endel, I am still getting the same error.
I see that in node_modules colyseus.js@0.11.7 still uses httpie@^2.0.0-next.2.

Hey nevermind I just got it working!

[endel]

Hi @ArdaNakisci, I've just released version 0.12 of the server and clients. I've bumped the version of httpie there, let me know if that works for you! Cheers!