React + Sails + Socket.io

Question

这是一个相当广泛的问题，但是我目前有一个Sails API服务器和一个React前端（独立）。

注意：React前端不是Sails的一部分

我试图与套接字保持联系，所以我认为我会从简单开始。我要实现以下目标：

• 用户访问我的网站（反应）
• React打开一个套接字并连接到Sails
• Sails从功能/模型中流式传输数据
• 将新数据添加到模型时进行更新

我半了解使用Express和React的方式，但是我无法理解Sails如何在Sockets.io之上实现其WebSockets版本。

我所做的是在React中安装sockets.io-client，然后尝试在Sails中使用sails.sockets。

这是我目前拥有的：

React Component NB：我认为这根本不正确

componentDidMount =()=> {
  this.getSessionData();
  UserStore.listen(this.getSessionData);
  Socket.emit('/listSessions', function(data){
    console.log(data);
  })
}

航行功能（listSessions）

listSessions: function(req, res) {
    Session.find({ where: {visible: true},  sort: 'createdAt DESC'},
    function(err, sessions){

        if(req.isSocket){
            Session.watch(req.socket);
            console.log('User subscribed to ' + req.socket.id);
        }

        if(err) return res.json(500, {
            error: err,
            message: 'Something went wrong when finding trades'
        });

        return res.json(200, {
            sessions: sessions,
        });
    })
},

Sails函数（createSession） 尝试将publishCreate与上述函数中的Session.watch结合使用

createSession: function(req, res){

    var token = jwt.sign({
        expiresIn: 30,
    }, 'overwatch');


    Session.create({
        username: req.body.username,
        platform: req.body.platform,
        lookingFor: req.body.lookingFor,
        microphone: req.body.microphone,
        gameMode: req.body.gameMode,
        comments: req.body.comments,
        avatar: null,
        level: null,
        hash: token,
        competitiveRank: null,
        region: req.body.region,
        visible: true,
    }).exec(function(err, created){

        Session.publishCreate(created);

        if(err) {
            console.log(err);
            return res.send({
                error: err,
                message: 'Something went wrong when adding a session',
                code: 91
            })
        }
        if(req.isSocket){
            Session.watch(req.socket);
            console.log('User subscribed to ' + req.socket.id);
        }
        return res.send({
            session: created,
            code: 00,
        })
    });
},

这两个Sails函数都使用POST / GET进行调用。我完全不知道在哪里可以使用它，而且关于如何进行此工作的文档或解释似乎很有限。套接字上的所有Sails文档似乎都与将Sails用作前端和服务器有关

Answer 1

好的，所以我设法解决了这个问题：

简单的说：

在React中，我必须包含https://github.com/balderdashy/sails.io.js/tree/master

然后在我的React组件中，我做了：

  componentDidMount =()=> {
    io.socket.get('/listSessions',(resData, jwres) => {
      console.log('test');
      this.setState({
        sessions: resData.sessions,
        loaded: true,
      })
    })

    io.socket.on('session', (event) => {
      if(event.verb == 'created') {

        let sessions = this.state.sessions;
        sessions.push(event.data);
        this.setState({
          sessions: sessions
        })
      } else {
        console.log('nah');
      }
    });
  }

这会使用Socket.io向Sails发出虚拟的get请求，并将响应设置为state。它还会监视“会话”连接的更新，并使用这些更新来更新状态，这意味着我可以实时更新列表

在我的Sails控制器中，我有：

listSessions: function(req, res) {

    if(req.isSocket){
        Session.find({ where: {visible: true},  sort: 'createdAt DESC'},
        function(err, sessions){

            Session.watch(req.socket);

            if(err) return res.json(500, {
                error: err,
                message: 'Something went wrong when finding trades'
            });

            return res.json(200, {
                sessions: sessions,
            });
        })
    }
},

Session.watch行通过publishCreate侦听更新，该更新在我的模型中找到，如下所示：

  afterCreate: function(message, next) {
    Session.publishCreate(message);
     next();
   },