P5.js，Node和Twitter API

Question

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

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

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

问题是-我的最终结果是我希望所有过程都是无缝的，我需要将草图最初提供给用户，并加载默认数据集。 但是，我需要表格来动态更新草图（使用我想象中的AJAX？）

我的问题是：是否有较简单的方法来实现^？ 我猜想结合使用JQuery和Ajax，但是我对尝试辨别将在客户端运行什么和在服务器端运行感到困惑。

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

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

提前致谢 ：）

Server.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;
  }
}


}

form.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

现在，这个问题很难回答。 堆栈溢出不是为一般的“我该怎么做”类型的问题而设计的。 这是针对特定的“我尝试过X，期望是Y，但是却得到了Z”类型的问题。

如果您尝试找出问题所在，也会有更好的运气。 您可以创建一个示例应用程序，该应用程序具有一个提交给服务器的表单，一个仅将表单内容保存到文件的服务器以及一个P5.js草图，该草图加载文件的内容以在屏幕上显示字符串。 那将包含您需要的所有“动人作品”，而没有与您的问题没有直接关系的任何额外内容。

我强烈建议您先尝试将一个较小的示例应用程序放在一起。 将问题分解成两部分（提交表单并获取json）是一件好事，但是现在您需要以另一种方式分解它：从一个基本的应用程序开始，然后在添加完之后添加实际的逻辑连接正常工作。

我会说，您的一般方法应该可行。 您将执行以下操作：

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

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