2016-07-01 3 views
0

質問:フォーム入力データをmysqlデータベースに保存したいのですが、socket.ioにはpreventdefaultが必要なので、socket.ioを使用してデータを保存する最良の方法を見つけることはできません。socket.ioのためにフォームの送信を防ぐために、フォームデータをデータベースに保存するにはどうすればいいですか?

投稿リクエストとして投稿してから私のエクスプレスアプリを使用してmysqlデータベースに保存していた〜10個の入力フィールドを持つフォームがあります。

前に:私は、私は、フォームから提出された情報をリアルタイムに別のページを更新できるようにsocket.ioを使用するように頼まれたまで

**index.ejs** 
<form class='form' role='form' action='/users' method='POST'> 
    <input class='form-input' name='Client[FName]' type='text' /> 
    <input class='form-input' name='Client[LName]' type='text' /> 
    etc.. 
</form> 

**server.js** 
router.post('/users', (req, res) => { 
    const post = req.body.Client 
    pool.query('INSERT INTO Client SET ?', post, (err, result) => { 
    res.redirect(`users/${result.insertId}`); 
    }) 
}) 

すべてが素晴らしい仕事をしていました。 socket.io使用するためには、私は、デフォルトのフォームの送信を防ぐために持っていた:

**index.js** 
let form = document.querySelector('.form'); 
let inputs = document.querySelectorAll('input'); 

form.addEventListener('submit', (e) => { 
    e.preventDefault(); 
    socket.emit('message', { 
    FName: inputs[0].value, 
    LName: inputs[1].value, 
    etc, 
    etc 
    }) 
}) 

**server.js** 
io.on('connection', function(socket) { 
socket.on('message', (message) => { 
    socket.broadcast.emit('message', message) 

    *sql insert statement here??* 

}) 
}); 

socket.ioが素晴らしい働いている、と私はリアルタイムでDOMを更新していますが、今、私はどのように把握する必要があり再びmysqlにデータを保存することに戻ります。イベントリスナーでタイムアウトを設定する以外の方法はありますか?以前のクエリをsocket.io関数に挿入するだけですか?

私は心配な質問をお詫び申し上げます。事前に感謝します。私は

1と考えることができます

+0

hmm、なぜserver.jsコードの/ usersにPOSTを行うだけではないのですか? – derp

答えて

0

つのオプション)を使用すると、クライアント

2からメッセージを取得するときにserver.js内部/ユーザーへのPOSTを行います)インデックス内部/ユーザーにAjaxのPOSTを作ります.jsサブミットハンドラ

form.addEventListener('submit', (e) => { 
    e.preventDefault(); 
    socket.emit('message', { 
    FName: inputs[0].value, 
    LName: inputs[1].value, 
    ... 
    }); 
    $.post({ 
    url: "/users", 
    ... 

    }); 
}) 
関連する問題