时间戳

首页 > 解决方案 > 为什么我无法从 React/ReactNative 客户端应用程序监听 socket.io 事件？

reactjs - 为什么我无法从 React/ReactNative 客户端应用程序监听 socket.io 事件？

问题描述

我是 socket.io 的新手，我将它与 react 和 react native 一起使用。在我的场景中，服务器发出一个“incomingBooking”事件。所以客户需要捕捉这个事件并在控制台中打印“预订详细信息”。

我尝试如下，但它对我不起作用。

export default class App extends Component<Props> {

    componentDidMount () {
        const socket = io.connect("http://localhost:3000/riders");
        const username = "pawan@gmail.com";
        const data = {
            username: username,
            room: username,
            location: {
                latitude: 6.8741,
                longitude: 79.8605,
            }
        }
        socket.emit('joinRoom', {room: username});
        socket.emit('updateLocation', data);

        socket.on('incomingBooking', function (details) {
            console.log('Booking!!!', details);
        });

        console.log("Done")
    }

    render() {
        return (
            <Drawer/>
        );
    }
}

标签： reactjsreact-nativesocket.io

解决方案

你能描述一下你是如何从服务器发送信息的吗？

这个例子应该可以正常工作：

//server.js
const io=require('socket.io')();
io.on('connect',(socket)=>{
    console.log('socket connected');
    socket.on('updateLocation',(msg)=>{
        console.log('updateLocation request');
        socket.emit('incomingBooking',{
            test:'data'
        })
    })
})
io.listen(3000)

注意：当你socket.on('eventName')在客户端使用时，你必须socket.emit('eventName')在服务器端使用，socket.send('something')这是行不通的。

推荐阅读