【问题标题】:Using Socket.io not working in React Native Mobile App使用 Socket.io 在 React Native 移动应用程序中不起作用
【发布时间】:2021-09-22 22:44:44
【问题描述】:

我尝试将套接字与 React Native 移动应用程序连接。 节点服务器 socket.io 正在工作,我已经使用了 react web,但是当我使用 React Native Mobile App 时没有工作

客户端(反应原生

import io from 'socket.io-client';

const ENDPOINT = "http://192.168.1.3:7000";
const socket = io(ENDPOINT, {transports: ['websocket']});

const getMessage = () => {
  socket.on('getMessage', (data) => {
    console.log('socket data', data);
  })
};

const sendMessage = () => {
  var userid = log.userid
  var message = "msg from app"
  socket.emit('send msg', { userid, message });
}

服务器(节点 Js)

const app = express();
const server = app.listen(7000);
const io = require('socket.io')(server, {
cors : {
    origin:'*'
  }
});

io.on("connection",(socket)=>{
  socket.on('sendMessage',({userid, message})=>{
    io.emit('getMessage',{userid, message});
  })
})

【问题讨论】:

    标签: node.js react-native websocket socket.io


    【解决方案1】:

    开发!我解决了这个问题,只是不使用 socket.io。我知道 Socket.io 在移动应用程序中不是一个好的选择。请改用WebSocket API

    反应组件

    import React from 'react';
    import { View, Text } from 'react-native';
    
    class WebSocketConnection extends React.Component {
    
        constructor(props) {
            super(props);
            this.webSocket = this.webSocket.bind(this);
        }
    
        webSocket() {
            const ws = new WebSocket('ws:172.16.20.201:8080');
    
            ws.onopen = (e) => {
                console.log('connected on wsServer');
            }
            
            ws.addEventListener('open', function (event) {
                ws.send('Hello from React Native!');
            });
            
            ws.addEventListener('message', function (event) {
                this.message = event.data;
                console.log('Message from server ', event.data);
            });
            
            ws.onerror = (e) => {
                console.log(e);
            }
        }
        
        render() {
            return (
                <View>
                    <Text>
                        Socket.io YES
                    </Text>
                </View>
            )
        }
    
        componentDidMount() {
            this.webSocket();
        }
    
    }
    
    export default WebSocketConnection;
    

    服务器

    /**
     * Create WebSocket server.
     */
    
    const WebSocket = require('ws');
    const serverWs = new WebSocket.Server({
      port: 8080
    });
    
    let sockets = [];
    serverWs.on('connection', function(socket) {
      sockets.push(socket);
    
      console.log(`connectet client`);
    
      // When you receive a message, send that message to every socket.
      socket.on('message', function(msg) {
        console.log(msg);
        sockets.forEach(s => s.send(msg));
      });
    
      // When a socket closes, or disconnects, remove it from the array.
      socket.on('close', function() {
        sockets = sockets.filter(s => s !== socket);
      });
    });
    

    在使用 Express 时,我将此服务器绑定在 /bin/www 中,并且对我来说工作正常。

    【讨论】:

    • 嗨。我在使用 socket.io 时也遇到了麻烦,然后我找到了你的答案。您能否与我分享更多信息,例如在服务器上安装什么或做出类似反应。真的很感激。谢谢
    • 嗨,开发者。在服务器中,您将拥有一个本机 WebSocket 服务器。 MasteringJs 。在客户端,您将拥有一个本机 WebSocket 客户端(甚至是 ReactNative)。 Mozilla .I'm not sure I've help you,但如果没有,请告诉我更多信息!祝福!
    猜你喜欢
    • 2023-01-18
    • 2017-02-13
    • 2019-10-22
    • 2018-11-13
    • 2022-12-29
    • 1970-01-01
    • 1970-01-01
    • 2021-02-02
    • 1970-01-01
    相关资源
    最近更新 更多