web-dev-qa-db-ja.com

ExpressとWebSocketは同じポートでリッスンします

いくつかのPOSTデータを受信したときに2つのイベントをトリガーするために使用されるapp.jsがあります。

  1. データベースへのPOSTデータの挿入
  2. WebSocketを使用してクライアントにメッセージを送信する

これはapp.js（重要な行のみ）です

var express = require('express');
var bodyParser = require('body-parser');
var server = require('./server');

var app = express();
var port = process.env.PORT || 3000;

app.post('/server', server);

app.listen(port, function(){
  console.log('Slack bot listening');
});

そして、これはserver.js（重要な行のみ）

var db = require('./DB');
var WebSocketServer = require('ws').Server;

var insertData = function(req, res){

    var wss = new WebSocketServer({server: server});
    console.log('WebSocketServer created');
    wss.on('connection', function(wss){
        wss.send(JSON.stringify('Socket open'));
    });
    wss.on('close', function(){
        console.log('WebServerSocket has been closed');
    });
};

module.exports = insertData;

私が達成したいのは、アプリの同じポートをリッスンするようにWebSocketServerを設定することです。 servervarをapp.jsからserverに渡すことを考えました.jsしかし

  1. これはエレガントな方法ではないと思います
  2. どうやってやるのか分からない

皆さんはどう思いますか？

javascriptnode.jswebsocket
21
Mornor

コードとコメントに基づいて、どのように連携するかを示す非常に簡単な例を次に示します。

まず、_http-server.js_-app.listen()でサーバーを起動しないことを除いて、典型的な高速アプリです。

_'use strict';

let fs = require('fs');
let express = require('express');
let app = express();
let bodyParser = require('body-parser');

app.use(bodyParser.json());

// Let's create the regular HTTP request and response
app.get('/', function(req, res) {

  console.log('Get index');
  fs.createReadStream('./index.html')
  .pipe(res);
});

app.post('/', function(req, res) {

  let message = req.body.message;
  console.log('Regular POST message: ', message);
  return res.json({

    answer: 42
  });
});

module.exports = app;
_

さて、ノードのネイティブhttp.createServer()からWSSサーバーを作成する_ws-server.js_の例。ここで、ここでアプリをインポートし、このネイティブhttp.createServerに使用するアプリインスタンスを指定します。

_PORT=8080 node ws-server.js_でアプリを起動します：

_'use strict';

let WSServer = require('ws').Server;
let server = require('http').createServer();
let app = require('./http-server');

// Create web socket server on top of a regular http server
let wss = new WSServer({

  server: server
});

// Also mount the app here
server.on('request', app);

wss.on('connection', function connection(ws) {

  ws.on('message', function incoming(message) {

    console.log(`received: ${message}`);

    ws.send(JSON.stringify({

      answer: 42
    }));
  });
});


server.listen(process.env.PORT, function() {

  console.log(`http/ws server listening on ${process.env.PORT}`);
});
_

最後に、このサンプル_index.html_は、POSTとSocket "request"の両方を作成し、応答を表示することで機能します。

_<html>
<head>
  <title>WS example</title>
</head>

<body>
  <h2>Socket message response: </h2>
  <pre id="response"></pre>
  <hr/>
  <h2>POST message response: </h2>
  <pre id="post-response"></pre>
  <script>

  // Extremely simplified here, no error handling or anything
document.body.onload = function() {

    'use strict';

  // First the socket requesta
  function socketExample() {
    console.log('Creating socket');
    let socket = new WebSocket('ws://localhost:8080/');
    socket.onopen = function() {

      console.log('Socket open.');
      socket.send(JSON.stringify({message: 'What is the meaning of life, the universe and everything?'}));
      console.log('Message sent.')
    };
    socket.onmessage = function(message) {

      console.log('Socket server message', message);
      let data = JSON.parse(message.data);
      document.getElementById('response').innerHTML = JSON.stringify(data, null, 2);
    };
  }

  // Now the simple POST demo
  function postExample() {

    console.log('Creating regular POST message');

    fetch('/', {  
      method: 'post',  
      headers: {  
        "Content-type": "application/json"  
      },  
      body: JSON.stringify({message: 'What is the meaning of post-life, the universe and everything?'})  
    })
    .then(response => response.json())  
    .then(function (data) {  

      console.log('POST response:', data);
      document.getElementById('post-response').innerHTML = JSON.stringify(data, null, 2);   
    })  
    .catch(function (error) {  
      console.log('Request failed', error);  
    });   
  }

  // Call them both;

  socketExample();
  postExample();
}
  </script>
</body>
</html>
_

このクライアント側のWebSocket APIとフェッチAPIの両方を備えた、ごく最近のブラウザが必要になることに注意してください。しかし、とにかく重要ではありません。

41
Zlatko