2017-02-21 12 views
1

私は、プランナを模倣した平均スタックを備えたシンプルな遊び場を作りたいと思っています。ファイルリストとテキストエリアが左側にあり、ライブプレビューが右側にあります。ファイルは一時フォルダに保存され、ライブプレビューはその一時フォルダのファイルによって挿入されたiframeであることに注意してください。サーバ内のファイルへの連続書き込みが遅い

enter image description here

私は何かをコード化しています。フロントエンドでは、コントローラはテキストエリア内のファイルの変更を監視します。変更があるたびにrenderが呼び出され、$http.postを送信してすべてのファイルの新しいバージョンを保存します。バックエンドで

app.controller('Ctrl', ['$scope', 'codeService', function ($scope, codeService) { 
    ... 
    $scope.$watch('files', function() { 
     codeService.render($scope.files) 
    }, true); 
}]); 

app.service('codeService', ['$http', function ($http) { 
    this.render = function (files) { 
     ... 
     var arrayLength = files.length; 
     for (var i = 0; i < arrayLength; i++) { 
      $http.post('/writeFile', files[i]); 
     } 
    } 
} 

router.post('/writeFile', function (req, res, next) { 
    console.log("router.post /writeFile"); 
    var file = req.body; 
    var fs = require('fs'); 
    fs.writeFileSync("public/tmp/" + file.name, file.body); 
}); 

私のテストでは、最初の修正のために、それは確かに、サーバー内のファイルに書き込まれ、ことを示しています。ただし、連続して変更する場合は、2回目以降の書き込みには20秒以上かかることがあります。

文章を遅くすることは誰でも知っていますか(第1のものを除いて)?

さらに、$http.post('/writeFile', files[i])に電話するか、またはrouter.post('/writeFile'...と非同期で書き込む必要がありますか?

編集1:

次のようにHTTPリクエストを書くことが正しいかどうか、私はまた、私は、同期機能(すなわち、内部で非同期関数(すなわち、HTTPポスト)を有するAM(疑問に思ってrender)私はrender asynchonousをしなければならない):??

app.service('codeService', ['$http', function ($http) { 
    this.render = function (files) { 
     ... 
     var arrayLength = files.length; 
     for (var i = 0; i < arrayLength; i++) { 
      $http.post('/writeFile', files[i]); 
     } 
    } 
} 

私は私のコードでは、他のHTTP要求を参照すると、ファッションは

o.create = function (post) { 
    return $http.post('/posts', post, { 
     headers: { Authorization: 'Bearer ' + auth.getToken() } 
    }).success(function (data) { 
     o.posts.push(data) 
    }); 
}; 
のようなことが多いです
+1

'fs.writeFileSync'を使用しないでください。非同期バージョン – wong2

+0

を使用してください。 \ *同期機能の背後にある全体のアイデアは、*ブロッキング*です。 – estus

+0

ありがとうございます...私の更新を見てください... – SoftTimur

答えて

1

あなたのコードをリファクタリングしようとする可能性があります。以下のものを含めるようにしてください:

1)ウォッチャーをデバウンス機能にラップします。 https://lodash.com/docs/4.17.4#debounce

$scope.$watch('files', _.debounce(function() { 
     codeService.render($scope.files) 
    }, 1000), true); 

それは無用の呼び出し

2を防止する)代わりにwriteFileSync

fs.writeFile("public/tmp/" + file.name, file.body, (err) => { 
    if (err) throw err; 
    console.log('It\'s saved!'); 
}); 

writeFileに非同期機能でNodeJsの力を使って、あなたのコード内で同期呼び出しを避けるようにしてください。

+0

ありがとうございます...私はまだ1つの質問があります、私の更新を参照してください... – SoftTimur

+0

あなたの質問に答える、それは正しい方法は次のとおりです?短い答えはいいえです。別の質問をしてください。連続した非同期呼び出しを処理する方法を説明します。 – Cassidy

+0

OK、別の(複雑な)質問を書くつもりです... – SoftTimur

関連する問題