だら＄ちっぷす

仕事の覚書です

Node.jsでローカルサーバを立てる

node.js javascript

ちょっとしたwebツールを作るのにファイル操作めんどいからnodeでやったれと思って久々にメインから書きはじめたら全然忘れてた(;´д｀)のでメモ。 

/*
　　tool1.js
　　起動テスト
*/

//起動アドレス
const ip = "127.0.0.1";    //localhost
const port = 30303;   //テキトー（未だに何番使えば笑われなくて済むのかわからん）

//expressモジュール
const express = require('express');
const app = express();

//appでjson送る時はこの2つが必要(送れるサイズをでかくする。デフォルトは100kb)
app.use(express.json({ extended: true, limit: '10mb' }));
app.use(express.urlencoded({ extended: true, limit: '10mb' }));


//https鯖を起動
try
{
    app.listen(port, ip, () =>
    {
        console.log('http server ' + ip + ":" + port)
    });
}
catch(err)
{
    console.log("鯖起動エラー", err);
    process.exit(1);
}

//確認
app.get('/', async (req, res, next) => 
{
    res.send('動作確認。わたしの好きな言葉です＾＾');
});



これを起動 

>node tool1.js
http server 127.0.0.1:30303



ブラウザで表示 

URL[ http://localhost:30303 ]
動作確認。わたしの好きな言葉です＾＾



よしよし。ええ感じや＾＾

続けて、POSTのテストをします。
以下のルーチンを tool1.js に追加。 

//POST確認
app.post('/situmon', async (req, res, next) => 
{
    let ans = {};
    switch(req.body.situmon)
    {
        case "like":
            ans.kotae = "動作確認。わたしの好きな言葉です＾＾";
            break;
        case "hate":
            ans.kotae = "仕様変更。わたしの苦手な言葉です＞＜";
            break;
        default:
            ans.kotae = "・・・・・(V)o\\o(V)ふぉっふぉっふぉ";
    }
    res.setHeader('Content-Type', 'application/json');
    res.write(JSON.stringify(ans));
    res.end();
});



POSTはfetchで発行するんで、少々テストがめんどいっす＞＜；
こんなHTMLを作ってみました。 

<!DOCTYPE html>
<html>
<!------------------------------------------------------------------------------
    test1.html
-------------------------------------------------------------------------------->
<head>
    <meta charset="UTF-8">
    <title>test1</title>
    <style>
        div > div
        {
            display: flex;              /*センタリング */
            align-items: center;        /*センタリング */
            justify-content: center;    /*センタリング */
            background-color:#fffaf0;
            border: solid #4682b4;
            border-radius: 8px;
            cursor:pointer;
            margin-top:8px;
            width:100px;
            height:30px;
            margin: 50px 2px 0px 2px;
        }
    </style>
</head>
<body>
    <div style="display:flex;justify-content: center;align-items: center;">
        <div onClick="situmon('like')">好きな言葉</div>
        <div onClick="situmon('hate')">苦手な言葉</div>
        <div onClick="situmon('')">無言</div>
    </div>
    <div id="id_kotae">
        <!-- ここに回答を書く -->
    </div>
</body>
</html>

<script>
async function situmon(word)
{
    let str = "";

    try
    {
        //送るデータ
        let reqData = 
        {
            situmon:    word
        };

        //送受信
        const res = await fetch(
                        "http://localhost:30303/situmon", 
                        {
                            method:     'POST',
                            body:       JSON.stringify(reqData), 
                            headers:    {'Content-Type': 'application/json'}
                            credentials:'include',
                            mode:       'cors'
                        });
        //受けたデータ
        if(res.ok)
        {
            const resData = await res.json();
            str = resData.kotae;
        }
        else
        {
            str = "[POST ERROR] " + res.statusText;
        }
    }
    catch(err)
    {
        str = "[FETCH ERROR] " + err;
    }

    id_kotae.innerHTML = str;
}
</script>



test1.htmlをダブルクリックするとchrome画面が立ち上がる。（うちはwindowsでchrome使てますからー）
適当なボタンをポチッとな。

・・・・ぐあああああああ！！！！::: (ﾉ'A`)>:::
出たなーーー！！！クロスオリジンめーーーーー！！！！！=͟͟͞͞⊂( ‘ω’∩ )

fetch使たらクロスオリジンでるんやったっけ。ちぇ。・３・
test1.jsに以下の２行を付け加える。 

//https鯖を起動
try
{
    //CORSを許可する(fetchを使うために必要)
    const cors = require('cors');
    app.use(cors({ origin: true, credentials: true }));


    app.listen(port, ip, () =>
    {
        console.log('http server ' + ip + ":" + port)
    });
}
catch(err)
{
    console.log("鯖起動エラー", err);
    process.exit(1);
}



よし！再起動だ！(｀･ω･´)ゞ
再起動。わたしの好きな言葉です。
HTMLをダブルクリックして、ボタンポチ～( ・∀・)つ〃∩


うまく行ったー！！(∩´∀｀)∩ﾜｰｲ(∩´∀｀)∩ﾜｰｲ

以上です！(｀･ω･´)ゞ
※これはローカル専用です。セキュリティもへったくれも考えてないです。