Sockets 反应+；帆+；Socket.io

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

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

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,
        });
    })
},

我正在努力掌握套接字，所以我想我应该从简单开始。我希望实现以下目标：

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

我半了解使用Express和React的工作原理，但我无法理解Sails如何在Sockets.io上实现其版本的WebSocket

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

这就是我目前拥有的：

反应成分NB：我认为这根本不对

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

帆功能（listSessions）

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调用的。

---

我完全不知道该怎么做，而且关于如何让它工作的文档或解释似乎是有限的。Sockets上的所有Sails文档似乎都与使用Sails作为前端和服务器有关，所以我设法解决了这个问题：

简言之：

在React中，我必须包括

然后在我的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请求，并将响应设置为状态。它还监视“会话”连接的更新，并使用这些更新更新状态，这意味着我可以实时更新列表

在我的风帆控制器中，我有：

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中，我必须包括

然后在我的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请求，并将响应设置为状态。它还监视“会话”连接的更新，并使用这些更新更新状态，这意味着我可以实时更新列表

在我的风帆控制器中，我有：

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();
   },

---

稍后我可能会给出一个更具体的答案，但你有一个容易发现的混淆。在客户端中，您将回调函数传递给

socket.emit

。这是不正确的。当您发射时，您将传递数据（或null或其他）。当您想要接收数据时，它是一个ON处理程序

socket.ON（'someServerEvent'，函数（数据）…

谢谢，不过我想做的是在SailsRight中执行listSession函数上的post，这不是它的工作原理。即使sails可能包含一些内置的socket内容，也没有什么能阻止您添加socket.io服务器端包，并在那里监听事件，传递任何模式l您需要的数据。套接字是基于命名事件的事件，与HTTP调用使用的路由不同。是的，我想这不是它的工作方式，但我甚至一直在想如何使用Sails函数将数据发送到连接。根据文档，publishCreate和Watch一起工作，但正如您在我的代码中看到的，我需要先获取初始数据以作出反应我可能稍后会给出更具体的答案，但您有一个容易发现的混淆。在您的客户端中，您将回调函数传递给

socket.emit

。这是不正确的。当您发出时，您将传递数据（或null或其他）。当您想要接收数据时，它是一个ON处理程序

socket.ON（'someServerEvent'，函数（数据）…

谢谢，不过我想做的是在SailsRight中执行listSession函数上的post，这不是它的工作原理。即使sails可能包含一些内置的socket内容，也没有什么能阻止您添加socket.io服务器端包，并在那里监听事件，传递任何模式l您需要的数据。套接字是基于命名事件的事件，与HTTP调用使用的路由不同。是的，我想这不是它的工作方式，但我甚至一直在想如何使用Sails函数将数据发送到连接。根据文档，publishCreate和Watch一起工作，但正如您在我的代码中看到的，我需要首先获取反应的初始数据您是如何整合sails和React的？您知道任何文献吗？您是如何整合sails和React的？您知道任何文献吗？