Support react-native

[xaviramirezcom]

Hi, I'm trying to use the library but It never connects with rethinkdb server, log just prints: 04:14:52.518 ::ffff:192.168.99.1:54361 Connect 04:15:12.548 ::ffff:192.168.99.1:54361 webSocket closed 04:15:12.549 ::ffff:192.168.99.1:54361 dbSocket closed

Code on nodejs:

console.log('Server online!');
//First Part
var r = require('rethinkdb');
r.connect({host: "rethinkdb", port: '28015'}, function (err, connection) {
    r.db('db').table('users').insert({
        "id": 3,
        "title": "Lorem ipsum",
        "content": "Dolor sit amet"
    }).run(connection, function (err, result) {
        console.log(result);
        connection.close();
    });
});

//Second Part
var express = require('express');
var http = require('http');
var wsListen = require('rethinkdb-websocket-server').listen;
var options = {};
var httpServer = http.createServer();
options.dbHost = 'rethinkdb';
options.dbPort = '28015';
options.unsafelyAllowAnyQuery = true;
options.httpServer = httpServer;

wsListen(options);
httpServer.listen(3000);

As you can see on the first part I'm testing the connection directly, second part is not responding

Thanks for your help

[mikemintz]

@xaviercobain88 Can you please share the code where you connect to rethinkdb-websocket-server on port 3000?

[xaviramirezcom]

Sure! Thanks for your rapid response.

I'm building the environment via docker-compose:

auth:
  build: "nodejs"
  container_name: "auth"
  restart: always
  volumes:
    - "${HOME}/projects/rethink_server/auth:/src"
  ports:
      - "3000:3000"
  links:
    - "rethinkdb:rethinkdb"
rethinkdb:
  image: "rethinkdb"
  container_name: "rethinkdb"
  restart: always
  ports:
    - "82:8080"
    - "28015:28015"
    - "29015:29015"

and I'm testing on a standalone nodejs with a simple script:

console.log('Server online!');
var RethinkdbWebsocketClient = require('rethinkdb-websocket-client/dist/node');
var r = RethinkdbWebsocketClient.rethinkdb;
var options = {
    host: '192.168.99.100',
    port: 3000,
    path: '/',
    wsProtocols: ['binary'],
    secure: false,
    db: 'db',
    simulatedLatencyMs: 100,
};

RethinkdbWebsocketClient.connect(options).then(function(conn) {
    r.table('users').insert({
        "id": 3,
        "title": "Lorem ipsum",
        "content": "Dolor sit amet"
    }).run(connection, function (err, result) {
        console.log(result);
        connection.close();
    });
});

and it works, but when I'm testing the same on react-native app:

import React, {
    Component, Text
} from 'react-native';
global.Buffer = global.Buffer || require('buffer').Buffer;

export default class Login extends Component {
    constructor(props) {
        super(props);
        var RethinkdbWebsocketClient = require('rethinkdb-websocket-client');
        var r = RethinkdbWebsocketClient.rethinkdb;
        var options = {
            host: 'rdb.com',
            port: 3000,
            path: '/',
            wsProtocols: ['binary'],
            secure: false,
            db: 'db',
            simulatedLatencyMs: 100,
        };

        RethinkdbWebsocketClient.connect(options).then(function(conn) {
            r.table('users').insert({
                "id": 3,
                "title": "Lorem ipsum",
                "content": "Dolor sit amet"
            }).run(conn, function (err, result) {
                console.log(result);
                conn.close();
            });
        });

    }

    render() {
        return (
            <Text>
               This is a text</Text>
        );
    }
}

(rdb.com is set on /ectc/hosts):

127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
192.168.99.100 rdb.com 
192.168.99.100 www.rdb.com 

and log on react native app shows:

Sending ArrayBuffers is not yet supported
YellowBox.js:57 Unhandled rejection ReqlTimeoutError: Could not connect to rdb.com:3000, operation timed out.
    at ReqlTimeoutError.ReqlError [as constructor] (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:75490:7)
    at new ReqlTimeoutError (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:75637:47)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true:74064:27
    at JSTimersExecution.callbacks.(anonymous function) (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:3727:13)
    at JSTimersExecution.callTimer (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:3349:1)
    at Array.forEach (native)
    at Object.JSTimersExecution.callTimers (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:3372:10)
    at MessageQueue.__callFunction (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:2759:23)
    at http://localhost:8081/index.ios.bundle?platform=ios&dev=true:2663:8
    at guard (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:2617:1)
    at MessageQueue.callFunctionReturnFlushedQueue (http://localhost:8081/index.ios.bundle?platform=ios&dev=true:2662:1)
    at DedicatedWorkerGlobalScope.onmessage (http://localhost:8081/debuggerWorker.js:39:56)

and rethinkdb-websocket-server logs:

auth            | 11:59:29.613 ::ffff:192.168.99.1:53459 Connect
auth            | 11:59:49.636 ::ffff:192.168.99.1:53459 webSocket closed
auth            | 11:59:49.637 ::ffff:192.168.99.1:53459 dbSocket closed

Thanks a lot

[mikemintz]

@xaviercobain88 I think the relevant line is Sending ArrayBuffers is not yet supported.

It looks like you're using react-native for iOS. Support for ArrayBuffers with WebSocket was added to react-native 2 weeks ago in react-native 0.18. Can you check what version you're using, and try upgrading to 0.18 if it's older than that?

If you're still having react-native-specific issues after upgrading, let's continue the discussion of the issue at https://github.com/mikemintz/react-rethinkdb/issues/11