javascript - P5.js、Node 和 Twitter API

Question

我一直在做的一个项目遇到了障碍，我想知道是否有人可以帮助我解决这个问题。

因此，我正在尝试开发一个 Node.js 应用程序，该应用程序使用 HTML 表单查询 Twitter API - 然后使用检索到的数据(以 JSON 形式)在 P5.js 草图中可视化推文。

到目前为止，我已经能够使用一个表单来查询 API 并将提取的推文写入 JSON 文件。 另外，我还能够将 JSON 文件拉入 P5 并按照我认为合适的方式操作数据。

问题是 - 我的最终游戏是我希望这一切都是一个无缝的过程，我需要最初向用户提供草图，加载到默认数据集中。但是，我需要表单来动态更新草图(我想使用 AJAX？)

我的问题是:是否有更简单的方法来实现这一目标^？我猜测使用 JQuery 和 Ajax 的组合，但我对试图辨别什么将在客户端运行以及什么将在服务器端运行感到疲惫不堪。

TL;DR - 我想将用户输入的数据作为参数传递以查询 Twitter API 并异步更新 p5.js 草图。

我已经附上了到目前为止我正在使用的代码，如果有人可以帮助我，我将非常感激，这样我就不必再拔头发了!即使为我指明正确的方向也会有很大的帮助。

提前致谢:)

服务器.js

var http = require('http'),
    util = require('util'),
    fs = require('fs'),
    url = require('url'),
    qs = require('querystring');

//Imports the Twit package
var Twit = require('twit');
var totalTweets = [];
var query;
var tweetcount;


//Imports the JSONFILE package
var jsonfile = require('jsonfile')
jsonfile.spaces = 3


//Creates new Twit object
var T = new Twit({
      consumer_key:         'x'
    , consumer_secret:      'x'
    , access_token:         'x'
    , access_token_secret:  'x'     
})    


    //Parameters for the search
    var params = {
        q: "Hello",
        lang:" ",
        count: 70
    }


var server = http.createServer(function (req,res){

    var url_parts = url.parse(req.url,true);
    //console.log(url_parts);

    var body = '';
    if(req.method === 'POST'){
       // res.end('post');
       console.log('Request found with POST method');     
        req.on('data', function (data) {
            body += data;
            console.log('got data:'+data);
        });
        req.on('end', function () {

            var POST = qs.parse(body);
            // use POST
            res.end("Sent data are name:"+POST.name+" age:"+POST.age);

        });


    } else {
    console.log('Request found with GET method');     
    req.on('data',function(data){ res.end(' data event: '+data);});
    if(url_parts.pathname == '/')

    fs.readFile('./form.html',function(error,data){ 
    console.log('Serving the page form.html');
    res.end(data);    
    });

    else if(url_parts.pathname == '/getData'){
         console.log('Serving the Got Data.');
        getData(res,url_parts);
    }
        }

});
server.listen(8080);
console.log('Server listenning at localhost:8080');



function  getData(res,url_parts){
 console.log("Data submitted by the user name: "+url_parts.query.name+" and age:"+url_parts.query.age);
        res.end("Data submitted by the user name: "+url_parts.query.name+" and age: "+url_parts.query.age);

tweetcount = url_parts.query.age;
query = url_parts.query.name;

console.log(tweetcount + query);


    //Parameters for the search
    var params = {
        q: query,
        lang:" ",
        count: tweetcount
    }


//Searches Twitter Based on arguments
T.get('search/tweets', params, gotData)
function gotData(err, data, response){
var tweets = data.statuses;


//Creates a loop that stores tweets in an array
for (var i=0; i < tweets.length; i++) {
    totalTweets[i] = {
        Username: "@" + tweets[i].user.name,
        Tweet: tweets[i].text,
        Time: tweets[i].created_at
    };
}



var file = 'tweets.json'
//var obj = JSON.stringify(pulledtweets);
//Writes contents of array to JSON file
jsonfile.writeFileSync(file, totalTweets);
//jsonfile.writeFileSync(file, JSON.stringify(obj)) 
console.log("File written successfully");
console.log("Total number of tweets : " + tweets.length);
}
}

Sketch.js

var myTweets;
var x;
var brokenTweet;
var totalWords = [];
var currentTweet;
var obj = { };



console.log(obj);

function preload() {
  var tweetsFile = "tweets.JSON"
  myTweets = loadJSON(tweetsFile);
}


console.log(totalTweets);

function setup(){
createCanvas(windowWidth,windowHeight);
background(255);

fill(125);
ellipse(100,100,50,50);

x = 1;
  // create canvas
  createCanvas(windowWidth, windowHeight);

  input = createInput();
  input.position(width/2 - input.width/2, 100);

  button = createButton('submit');
  button.position(input.x + input.width, 100);

  textAlign(CENTER);
  textSize(50);
  console.log(myTweets[x].Tweet);
}


function draw(){
background(255);
textSize(18);
fill(0);
text(myTweets[x].Tweet,input.x-25,input.y+50, 300,300);
}

function greet(){
}

function keyPressed(){
if(keyCode == UP_ARROW){
  x++;


console.log(Object.keys(myTweets).length);


//Object.keys counts the amount of object in JSON file
for(var i = 0; i < (Object.keys(myTweets).length) ; i++){
currentTweet = JSON.stringify(myTweets[i].Tweet);
brokenTweet = currentTweet.split(" ");
//console.log(brokenTweet);
  for(var a = 0; a < brokenTweet.length; a++){
    var currentWord = brokenTweet[a];
   // console.log(currentWord);
    totalWords.push(currentWord.replace(/[^a-zA-Z]/g, ''));
  }
//console.log(totalWords);
}





//Loops through array and 
for (var i = 0, j = totalWords.length; i < j; i++) {
   if (obj[totalWords[i]]) {
      obj[totalWords[i]]++;
   }
   else {
      obj[totalWords[i]] = 1;
   } 
}




console.log(obj);

}

if(keyCode == DOWN_ARROW){
  x--;
  if(x < 0){
    x = 0;
  }
}


}

表单.html

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<form id="form1" name="form1" method="get" action="getData">
  <p>
  <label><label>Please Fill up the form and submit.<br />
  </label>Name
  <input type="text" name="name" id="name" placeholder="Please Input Name" />
    </label>
  </p>
  <p>
    <label>Age
        <input type="number" name="age" value="25" id="age" placeholder="Please Input Age" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

</body>
</html>

Answer 1

现在这个问题很难回答。 Stack Overflow 不适用于一般的“我该怎么做”类型的问题。它适用于特定的“我尝试了 X，预期是 Y，但得到了 Z”类型的问题。

如果您尝试隔离问题，您的运气也会更好。您可以创建一个示例应用程序，其中包含一个提交到服务器的表单、一个仅将表单内容保存到文件的服务器以及一个加载文件内容以在屏幕上显示字符串的 P5.js 草图。这将包含您需要的所有“移动部分”，而没有任何与您的问题不直接相关的额外内容。

我强烈建议您首先尝试组合一个较小的示例应用程序。很好，您已将问题分解为两部分(提交表单和获取 json)，但现在您需要以另一种方式分解它:从基本应用程序开始，然后在连接正常工作后添加实际逻辑。

我会说你的一般方法应该有效。你会做这样的事情:

• 创建一个包含表单和 P5.js 草图的 HTML 文件。如果需要，您可以加载默认数据集。
• 当用户单击表单中的按钮时，使用 AJAX 向包含表单数据的服务器发送请求。
• 让服务器执行任何处理，然后使用 JSON 内容响应请求。再次强调，在尝试获得实际结果之前，先从一个非常简单的示例开始。
• 然后在客户端，使用 JSON 响应根据需要修改 P5.js 草图。

从一个基本示例开始，如果您遇到特定问题，请发布 MCVE在一个新问题中，我们将从那里开始。祝你好运。