2016-09-08 10 views
1

これはかなりの質問ですが、現在私はSails APIサーバーとリアクションフロントエンド(スタンドアロン)を持っています。React + Sails + Socket.io

注:フロントエンドを反応させるのは、帆

私はソケットとグリップを取得しようとしているの一部ではないので、私は、私はシンプルなスタートと考えました。

  • ユーザーが
  • が反応(リアクト)私のウェブサイト訪問ソケットを開き、
  • 帆が
  • はアップデート時に反応し機能/モデル内のデータをストリーム帆に接続します。私は、次の達成したいです新しいデータがモデルに追加されました

私はこれが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)

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, 
     }); 
    }) 
}, 
で正しいとは思いません

セイル機能(createSession)は、上記機能POST/GETを使用して呼ばれる帆機能の

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

両方でSession.watchと組み合わせて使用​​するpublishCreateを使用しようとします。 私はこれとどこに行くべきか完全に困惑しています。この作業を行う方法に関する文書や説明は限られています。フロントエンドおよびサーバとしてソケット上のドキュメントは帆の使用に関連すると思われるすべての帆

+0

私はおそらく後で肉付け答えを出すことはできますが、重複が整理見つけるのは簡単を持っています。あなたのクライアントでは 'socket.emit'にコールバック関数を渡しています。これは間違っています。 EMITを実行すると、データ(またはnullなど)が渡されます。あなたがデータを受け取るときは、それをハンドラの 'socket.on( 'someServerEvent'、function(data)... ' – azium

+0

ですが、どうしても私がしようとしていたのは、SailsのlistSession関数のポストを実行することでした。 – K20GH

+0

それはどのように動作するのでしょうか?セイルにはソケットの組み込みが含まれていても、socket.ioサーバーサイドパッケージを追加してイベントを待機し、必要なモデルデータを渡すことはありません。 – azium

答えて

4

OKはので、私はこの問題を解決するために管理:

簡単に言えば:

に反応の中で、私はhttps://github.com/balderdashy/sails.io.js/tree/masterを含める必要がありました

は、その後、私は私がやったコンポーネントリアクト内:

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を使用して帆仮想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, 
      }); 
     }) 
    } 
}, 

セッション。ウォッチラインは次のように私のモデルで発見されたモデルにpublishCreate経由でアップデートをリッスン:

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