2015-06-11 JSONPのAPIを実装する

JSONPのAPI（なのか？）を実装した事が無かったのでExpressを使って、Expressのjsonpメソッドは使わずに自分で実装してみた。

server1.js

ただHTMLなどを返すサーバの役割をする方の実装。

var express = require('express'),
    serveStatic = require('serve-static'),
    app = express();

app.use(serveStatic(__dirname + '/views'));
app.listen(4000);

server2.js

APIサーバの役割をする方の実装。

var express = require('express'),
    app = express();

app.get('/', function(req, res, next) {
  var callbackName = req.query.callback || 'callback',
      jsonData = { message: 'Hello!' };

  res.set({
    'Content-Type': 'text/javascript; charset=utf-8'
  });
  res.end(callbackName + '(' + JSON.stringify(jsonData) + ')');
});
app.listen(5000);

views/index.html

index.jsを読み込むだけのHTMLファイル。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>JSONP</title>
  </head>
  <body>
    <script src="index.js"></script>
  </body>
</html>

views/index.js

JSONPを受け取るJavaScriptファイル。

(function(){

  'use strict';

  window.callback = function(jsonData) {
    console.log(jsonData);
  };

  var script = document.createElement('script');

  script.src = 'http://127.0.0.1:5000/';
  document.body.appendChild(script);

}());

あとは必要なモジュールをインストールして、サーバを2つ起動してブラウザでhttp://localhost:4000/にアクセスする。

$ npm install express serve-static
$ node server1.js &
$ node server2.js &

ブラウザでアクセスするとブラウザのコンソールにログが表示されていてると思う。簡単だった。