Using NodeJS to serve with Visualisation on Web
This article focus on Web and HTTP technique at first, because in current stage I’m learning how to collect and sort data. In next article I will show the method I combine data with visuals in my work.
写了个开头,我决定还是用中文写.毕竟很多东西我自己都不懂.
基本阐述
今天所有人都使用互联网,不过可能只有少数人了解它的原理.在多数人眼里,互联网可能只是很多可以相互点击,链接的网页.(实际上确实差不多) 作为数字艺术工作者,我在进行视觉可视化项目的期间接触了大量的网页相关知识,并且在未来的工作中,我可能会涉及更多的网络相关技术,所以我大概了了解了网络原理,然后现在来解释一下加深自己的认识.
Web的全名是,World Wide Web,直译应该是,世界范围的网络,我个人很喜欢万维网这个翻译😁.万维网的简写是 www, 我们可以发现这个就是我们非常熟悉的网址开头,三达不溜. 在讨论网址(域名)之前,我们不能忘记了另一个玩意儿,它甚至在www之前,不过我们基本很少手动输入它: http://,它的全称是 超文本传输协议,它告诉浏览器用何种方式去获得网页. 所以,我们浏览网页的步骤是:
通过http协议,输入域名来访问一个服务器,服务器发送网页给浏览器
这里我们知道了,之所以输入网址或者点开链接后会进入一个页面,是因为你的浏览器访问了那个服务器,服务器反手给了你一个新的页面.服务器是什么呢?在我看来,服务器就是一台24小时不关机的电脑.它既然是电脑,必然有程序来执行命令,有的程序负责通过得到的请求,来及时生成动态的网页;有的程序负责将这些网页投送给浏览器,即让用户看见. 打个比方就是,服务器是一个餐厅,浏览器(client)是一个顾客,顾客选好菜以后,通过http协议把菜单(XMLHttpRequest)请求给后台,后台厨师(如PHP,PYTHON)随手烹饪,然后交给传菜员(Apache,NodeJS)来分配菜品(HTML)给顾客.
其中传输协议和请求方式都有不同的好几种,我也不是很懂所以不多说了.只看最基本的.对于我来说,使用服务器来进行数据可视化的好处是,服务器能储存和读写数据,这有利于我们使用灵活的,动态的数据来进行创作.
开始架设简单的服务器
进入mac的终端
$ mkdir <name>
$ cd <name>
这一步我们创建了一个文件夹在电脑根目录,并且进入了它,之后的操作都会作用在这个文件夹内. 然后安装nodeJS 和express(nodeJS框架)
现在开始编写服务器脚本,并储存成js文件放在文件夹的根目录.
let express = require('express')
let app = express()
app.get('/',(req,res)=>{
res.send('Hello,world')
})
let server = app.listen(8081,()=>{
let host = server.address().address
let port = server.address().port
console.log(`here's ${host}:${port}`);
})
通过非常简单的几步,我们创建了一个WEB服务器,并且拥有了一个最基本的功能,当有请求链接进它的接口时,它会发出回应.现在通过终端命令启动它.
node <name>.js
现在,只要在浏览器输入localhost:8081就能访问这个服务器.8081是这个服务器的端口,目前的程序,只有访问这个端口,服务器才会发出回应. 然后我们就可以开始下一步的工作,通过访问其他公司开放的API,访问并获得数据. 因为我准备观察个体的区别,所以我准备获得一些推特上的post,之后再进行自然语言的分析.
先安装twitter for NodeJS,可以很方便的调用推特的API
$ npm install twitter
+++
var Twitter = require('twitter');
var client = new Twitter({
consumer_key:'xxx',
consumer_secret:'xxx',
bearer_token:'xxx'
});
client.get('tweets/search/30day/<envName>.json', {"query":"place:London"}, function(error, tweets, response) {
res.type('json')
res.send(tweets)
});
xxx所代表的密码需要自己去twitter注册,并且新建一个app项目,才能获得令牌和密码来访问推特的服务器.现在来说一些client.get(url,{“query”:””},function())中,参数的意义
链接,即通过这个链接可以访问推特API,在样例中,我使用的是高级搜索,还有基本搜索的url可以更简单的使用.如 https://api.twitter.com/1.1/search/tweets.json
回馈函数, 设置了响应的类型,并发送数据给客户端
以上的操作可以使服务器请求推特API并得到响应数据然后发送给客户端.而如何使服务器开始请求,提供什么样的要求去请求呢?此时我们就要使用前端脚本来命令客户端来发送数据到服务器,并把需要的请求发送出去,得到想要的数据.
更多的服务器功能
app.get('*', function(req, res) {
res.send('error');
});
当服务器被请求不存在的页面时,发送错误提醒.
app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");
next();
});
允许跨域.