前提・実現したいこと
仮想通貨の価格情報を取得して、それをChat.jsでリアルタイム表示しようと思っているのですが、まずnode.jsでwebページを表示しようとした際に、静的なhtmlならば表示できるのですが、chat.jsを使った動的なhtmlを表示することができません(このhtmlwebページを単体で動かそうとすると表示することができます。)何かする必要があるのでしょうか?
発生している問題・エラーメッセージ
Uncaught SyntaxError: Unexpected token < finex.js:1 contentscriptcomm.js:48 CheckAndValidate contentscriptcomm.js:132 prompt ui is not loaded hence fail =127.0.0.1 OnRequest @ contentscriptcomm.js:132 contentscriptcomm.js:48 CheckAndValidate contentscriptcomm.js:132 prompt ui is not loaded hence fail =127.0.0.1 OnRequest @ contentscriptcomm.js:132 contentscriptcomm.js:48 CheckAndValidate contentscriptcomm.js:132 prompt ui is not loaded hence fail =127.0.0.1 OnRequest @ contentscriptcomm.js:132 EventImpl.dispatchToListener @ VM20 extensions::event_bindings:403 publicClassPrototype.(anonymous function) @ VM26 extensions::utils:138 EventImpl.dispatch_ @ VM20 extensions::event_bindings:387 EventImpl.dispatch @ VM20 extensions::event_bindings:409 publicClassPrototype.(anonymous function) @ VM26 extensions::utils:138 messageListener @ VM27 extensions::messaging:240 EventImpl.dispatchToListener @ VM20 extensions::event_bindings:403 publicClassPrototype.(anonymous function) @ VM26 extensions::utils:138 EventImpl.dispatch_ @ VM20 extensions::event_bindings:387 EventImpl.dispatch @ VM20 extensions::event_bindings:409 publicClassPrototype.(anonymous function) @ VM26 extensions::utils:138 dispatchOnMessage @ VM27 extensions::messaging:392
該当のソースコード
javascript
1//サーバー側(test.js) 2 3const http = require('http'); 4 5const hostname = '127.0.0.1'; 6const port = 3001; 7 8var server = http.createServer(); 9server.on('request', doRequest); 10 11// ファイルモジュールを読み込む 12var fs = require('fs'); 13 14// リクエストの処理 15function doRequest(req, res) { 16 17 // ファイルを読み込んだら、コールバック関数を実行する。 18 fs.readFile('./finex.html', 'utf-8' , doReard ); 19 20 21 // コンテンツを表示する。 22 function doReard(err, data) { 23 if (err) { 24 res.writeHead(404, {'Content-Type': 'text/plain'}); 25 res.write("not found!"); 26 return res.end(); 27 } 28 res.writeHead(200, {'Content-Type': 'text/html'}); 29 res.write(data); 30 res.end(); 31 } 32 33} 34 35server.listen(port, hostname, () => { 36 console.log(`Server running at http://${hostname}:${port}/`); 37});
html
1//htmlファイル(finex.html) 2 3 4<head> 5 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.js"></script> 6 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script> 7 <script type="text/javascript" src="https://github.com/nagix/chartjs-plugin-streaming/releases/download/v1.2.0/chartjs-plugin-streaming.js"></script> 8 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pusher/4.1.0/pusher.js"></script> 9 <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.4/Chart.min.js"></script> --> 10</head> 11 12<body> 13 <canvas id="Bitfinex"></canvas> 14 15 <script src="finex.js"></script> 16</body>
javascript
1//finex.htmlで読み込むjs(finex.js) 2 3 4var buf = {}; 5buf['Bitfinex'] = [[],[]] 6 7var ws = new WebSocket('wss://api.bitfinex.com/ws/'); 8ws.onopen = function() { 9 ws.send(JSON.stringify({ // 購読リクエストを送信 10 "event": "subscribe", 11 "channel": "trades", 12 "pair": "BTCUSD" 13 })); 14}; 15ws.onmessage = function(msg) { // メッセージ更新時のコールバック 16 var response = JSON.parse(msg.data); 17 if (response[1] === 'te') { // メッセージタイプ 'te' だけを見る 18 19 buf['Bitfinex'][response[5] > 0 ? 0 : 1].push({ 20 x: response[3] * 1000, // タイムスタンプ(ミリ秒) 21 y: response[4] // 価格(米ドル) 22 }); 23 console.log(buf['Bitfinex']) 24 } 25 26} 27var id = 'Bitfinex'; 28var ctx = document.getElementById(id).getContext('2d'); 29var chart = new Chart(ctx, { 30 type: 'line', 31 data: { 32 datasets: [{ 33 data: buf['Bitfinex'][0], 34 label: 'Buy', // 買い取引データ 35 borderColor: 'rgb(255, 99, 132)', // 線の色 36 backgroundColor: 'rgba(255, 99, 132, 0.5)', // 塗りの色 37 fill: false, // 塗りつぶさない 38 lineTension: 0 // 直線 39 }, { 40 data: [], 41 label: 'Sell', // 売り取引データ 42 borderColor: 'rgb(54, 162, 235)', // 線の色 43 backgroundColor: 'rgba(54, 162, 235, 0.5)', // 塗りの色 44 fill: false, // 塗りつぶさない 45 lineTension: 0 // 直線 46 }] 47 }, 48 options: { 49 title: { 50 text: 'BTC/USD (' + id + ')', // チャートタイトル 51 display: true 52 }, 53 scales: { 54 xAxes: [{ 55 type: 'realtime' // X軸に沿ってスクロール 56 }] 57 }, 58 plugins: { 59 streaming: { 60 duration: 300000, // 300000ミリ秒(5分)のデータを表示 61 refresh: 100, // onRefresh callback will be called every 1000 ms 62 delay: 1000, // delay of 1000 ms, so upcoming values are known before plotting a line 63 pause: false, // chart is not paused 64 onRefresh: function(chart) { // データ更新用コールバック 65 66 Array.prototype.push.apply( 67 chart.data.datasets[0].data, buf[id][0] 68 ); // 買い取引データをチャートに追加 69 Array.prototype.push.apply( 70 chart.data.datasets[1].data, buf[id][1] 71 ); // 売り取引データをチャートに追加 72 buf[id] = [[], []]; // バッファをクリア 73 } 74 } 75 } 76 } 77});
試したこと
htmlファイルではなく、ejsにしなければならないのかなどやって見ては見たのですがよくわかりませんでした。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答3件
あなたの回答
tips
プレビュー