React原生Websocket外部访问

Question

我试图从一个不包含websocket的组件发送一个答案给我的websocket-server。我的WebSocket服务器如下所示：

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

如何将“var ws”传递给其他类或组件。或者是否有可能使websocket在全球范围内可访问？ 非常感谢您的帮助！

Answer 1

我发现帮助从这个问题在计算器的解决方案：

，请访问：

React native: Always running component

我创建了这样一个新的类WebsocketController：

let instance = null; 

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

    export default WebsocketController 

然后在我的其他类，我需要我的WebSocket我只是把它叫做是这样的：

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

Answer 2

WebSocket连接

保持这种代码一些文件，将其命名是.js extenstion。例如：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); 
}); 

在您的应用程序/网站的一面。创建.js文件。例如：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"; 
    }); 

} 

请让我知道，如果你面对任何问题与此代码