Question

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

注意：React Front-End不属于Sails

我正试图掌握套接字，所以我想我会开始简单。我想实现以下目标：

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

我半知道如何使用Express和React，但是我无法理解Sails如何在Sockets.io之上实现他们的WebSockets版本。

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

这就是我目前所拥有的：

反应组件注意：我认为这根本不正确

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

Sails功能（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,
        })
    });
},

使用POST / GET调用两个Sails函数。我完全不知道该怎么做，似乎有关如何使这项工作的文件或解释是有限的。套接字上的所有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();
   },

React + Sails + Socket.io

1 个答案: