在反应中听风帆套接字

Question

我正在尝试使用 React 监听 front-end 中 Sails 套接字的变化。

服务器监听 MongoDB Collection 中的变化并爆破变化：

// Setting up connection to MongoDB
const RTPEntryDB = sails.getDatastore("RTPEntrydb").manager;
// Switching to the appropriate collection in MongoDB
const profilesCollection = RTPEntryDB.collection("workloads");

// MongoDB Change Stream - Detect changes in DB's collection
const changeStream = profilesCollection.watch();
changeStream.on("change", function(change) {
    console.log("new change", change);
    sails.sockets.blast('newWorkloads', change);
})

一切正常。

但是在 front-end 上，我听不到

import React, { useRef, useReducer, useEffect } from 'react';
import PropTypes from 'prop-types';

import socketIOClient from 'socket.io-client';
import sailsIOClient from 'sails.io.js';


const FetchWorkloads = (props) => {

    // Instantiate the socket client (`io`)
    const io = sailsIOClient(socketIOClient);
    io.sails.url = 'http://localhost:1337/';

    io.socket.on('connect', function onConnect(){
        console.log('This socket is now connected to the Sails server!');
    });

    io.socket.on('newWorkloads', (msg) => {
        console.log('workloads changed', msg);
    });
    
    return (
        <>
            {/* My Component */}
        </>
        
    );
}

FetchWorkloads.propTypes = {
    api: PropTypes.object.isRequired
};

export default FetchWorkloads;

我收到错误 GET http://localhost:1337/__getcookie net::ERR_ABORTED 404 (Not Found)。我该如何解决？

谢谢

Answer 1

我通过在 routes.js 中定义自定义 __getcookie 解决了这个问题，如下所示：

'GET /__getcookie': (req, res) => {
        return res.send('_sailsIoJSConnect();');
 },

sails.io.js 和 socket.io-client 之间的兼容性还有另一个问题。我使用的是最新版本的 socket.io-client (v4.4)，但 sails 仅与 v2.x.

兼容

在反应中听风帆套接字

Listening to sails socket in react

reactjs

sails.js

sails.io.js

socket.io-client