CODEWITHSUNDEEP
javascriptreact-nativewebsocket
Hang
Hang

Reputation: 79

React Native Websocket outside access

Im trying to send an answer to my websocket-server from a component which does not contain the websocket. My Websocket server looks like this:

    componentDidMount() {
    var ws = new WebSocket('ws:// URL');
    ws.onmessage = this.handleMessage.bind(this);
    ...
    }

How can I pass the "var ws" to another class or component. Or is it possible to make the websocket globally accessable? Thank you very much for any help!

Upvotes: 2

Views: 2536

Answers (2)

Hang
Hang

Reputation: 79

I found a solution with help from this question in stackoverflow:

visit:

React native: Always running component

I created a new class WebsocketController like this:

    let instance = null;

    class WebsocketController{
        constructor() {
            if(!instance){
               instance = this;
            }
            this.ws = new WebSocket('ws://URL');
            return instance;
        }
    }

    export default WebsocketController

And then in my other class where I need my websocket I just called it like this:

    let controller = new WebsocketController();
    var ws = controller.ws;

 

Upvotes: 4

raj peer
raj peer

Reputation: 728

websocket connection

keep this code in some file, name it with .js extenstion. ex: websocket.js

var WebSocketServer = require("ws").Server;

var wss = new WebSocketServer({port:8100});

wss.broadcast = function broadcast(msg) {
    console.log(msg);
    wss.clients.forEach(function each(client) {
        client.send(msg);
    });
};

wss.on('connection', function connection(ws) {
    // Store the remote systems IP address as "remoteIp".
    var remoteIp = ws.upgradeReq.connection.remoteAddress;
    // Print a log with the IP of the client that connected.
    console.log('Connection received: ', remoteIp);

    ws.send('You successfully connected to the websocket.');

    ws.on('message',wss.broadcast);
});

In your app/website side. create .js file. Ex: client.js

var SERVER_URL = 'ws://127.0.0.1:8100';
var ws;

function connect() {
  //alert('connect');
    ws = new WebSocket(SERVER_URL, []);
    // Set the function to be called when a message is received.
    ws.onmessage = handleMessageReceived;
    // Set the function to be called when we have connected to the server.
    ws.onopen = handleConnected;
    // Set the function to be called when an error occurs.
    ws.onerror = handleError;

}

function handleMessageReceived(data) {
    // Simply call logMessage(), passing the received data.
    logMessage(data.data);
}

function handleConnected(data) {
    // Create a log message which explains what has happened and includes
    // the url we have connected too.
    var logMsg = 'Connected to server: ' + data.target.url;
    // Add the message to the log.
    logMessage(logMsg)

    ws.send("hi am raj");
}

function handleError(err) {
    // Print the error to the console so we can debug it.
    console.log("Error: ", err);
}

function logMessage(msg) {
    // $apply() ensures that the elements on the page are updated
    // with the new message.
    $scope.$apply(function() {
        //Append out new message to our message log. The \n means new line.
        $scope.messageLog = $scope.messageLog + msg + "\n";
    });

}

Please let me know if you face any issue with this code

Upvotes: 0

Related Questions