https://www.html.cn/qa/node-js/10667.html
执行后, 发现之前 node -v 显示的是 node/9.11.2
升级后反而是 node/8.17.0
For all the girls I loved
1: mkdir nodejsvideoserver
2 : 进入目录 , npm init , 这个命令会生成 package.json
3 : 新建 music 目录 , 放几个测试MP3
4: node.js 如何遍历目录, 得到所有文件名字和文件细节
https://flaviocopes.com/how-to-get-files-names/
5 : 生成包含这些文件的json 返回给 client
可用的实现为 :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
const fs = require('fs') const path = require('path') const dir = '/home/nodejsvideoserver/music' const files = fs.readdirSync(dir) const express = require('express') const port = 3000 const app = express() var Logs = []; //for (const file of files) { // console.log(file) // const stat = fs.lstatSync(path.join(dir, file)) // console.log(stat) //Logs.push(file) //} app.get('/musicfiles',function(req,res){ for (const file of files) { console.log(file) Logs.push(file) } res.json({files : Logs}); }); app.listen(port, () => console.log(`Example app listening on port ${port}!`)) |
6: flutter app 如何根据这个api 生成可播放的listview
medium网站的参考文章 : https://medium.com/nonstopio/flutter-future-builder-with-list-view-builder-d7212314e8c9
此文是生成一个future build listview , 不涉及播放
7 : 如何用 node.js写一个只支持 mp3 的流媒体服务器
参考 https://github.com/DarkMannn/node-radio-mini
a) https://github.com/illuspas/Node-Media-Server
中国人写的 media server
用这句代码
1 |
app.get('/', (req, res) => res.json({ answer: 42 })); |
具体实现为:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.get('/countrys', (req, res) => res.json({ "countrys": { "thailand": { "url": "http://www.bejson.com", "situations": [ { "name": "at airport", "url": "http://www.google.com" }, { "name": "rail station", "url": "http://www.baidu.com" }, { "name": "taxi", "url": "http://www.SoSo.com" } ] }, "laos": { "url": "http://www.bejson.com", "situations": [ { "name": "at airport", "url": "http://www.google.com" }, { "name": "rail station", "url": "http://www.baidu.com" }, { "name": "taxi", "url": "http://www.SoSo.com" } ] } } } )); app.listen(port, () => console.log(`Example app listening on port ${port}!`)) |
执行 node app.js
当访问 http://IP:3000/countrys , 会返回正确的json字符串
参考文章
https://stackoverflow.com/questions/19696240/proper-way-to-return-json-using-node-or-express
https://www.youtube.com/watch?v=EwHMSxSWIvQ
这个教程非常好+
图片都存在 imgbb,google 账号登陆
in opentok-rtc project , use grunt to compile less into css .
Grunt 是一个插件化的打包工具, 比如编译 less的插件就是 grunt-contrib-less, 安装方法是 :
1 |
npm install grunt-contrib-less --save-dev |
安装之后还需要 Gruntfile.js 做配置文件 ,
Grunt的 get start 网址: https://gruntjs.com/getting-started
配置文件例子 : https://gruntjs.com/sample-gruntfile
从 opentok截取出来的一个简单的Gruntfile.js 例子 , 这里只用到了编译 less的插件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
module.exports = function(grunt) { // To-Do check what we need and add/remove as needed... [ 'grunt-contrib-less' ].forEach(grunt.loadNpmTasks); grunt.loadTasks('tasks'); // To create HTML test files from a template. To-Do: Dunno if this is even needed or not var TEST_BASE_DIR = 'test/'; grunt.initConfig({ less: { default: { files: { 'myapp/public/stylesheets/landing.opentok.css': 'less/landing.less' } } }, }); // On watch events, if the changed file is a test file then configure mochaTest to only // run the tests from that file. Otherwise run all the tests grunt.registerTask('clientBuild', 'Build css files', [ 'less' ]); grunt.registerTask('initialConfig', [ 'clientBuild' ]); grunt.registerTask('default', ['clientBuild']); }; |
之后执行 grunt clientBuild 即可把 less 文件 编译为 css ,clientBuild 是自定义的任务名
在 opentok-rtc项目中, 还包括了 bower lib的引用 ,
in Gruntfile.js , it figure out where to find source less and where to store dest css , by :
1 2 3 4 5 6 7 8 9 10 11 12 |
less: { default: { files: { 'web/css/landing.opentok.css': 'web/less/landing.less', 'web/css/room.opentok.css': 'web/less/room.less', 'web/css/min.opentok.css': 'web/less/min.less', 'web/css/endMeeting.opentok.css': 'web/less/endMeeting.less', 'web/css/annotation.opentok.css': 'web/less/annotation.less', 'web/css/hangoutScroll.css': 'web/less/hangoutScroll.less' } } }, |
npm install bower –save
之后新建 bower.json
bower install
a)
这个是 image , 代码为:
1 2 3 |
<div class="icon-container"> <i data-icon="tokbox_logo"></i> </div> |
以data 开头的是 html5 新增的自定义属性, 可以是 data-whatever , 具体定义见 icons.less
b)
1 2 3 |
<div class="videoSwitch"> <a id="videoSwitch" class=""><i data-icon="videoSwitch"></i><span>Stop receiving video</span></a> </div> |
这个是相当于radio的按钮, 可通过点击 enable 或者 not , 用 js 实现 ,给 click 事件加 eventlistener , 从而在 class 加 activate 或者 去掉 , 示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
var videoSwitch; videoSwitch = document.querySelector('.videoSwitch'); function setSwitchStatus(status, bubbleUp, domElem, evtName) { var oldStatus = domElem.classList.contains('activated'); var newStatus; if (status === undefined) { newStatus = domElem.classList.toggle('activated'); } else { newStatus = status; if (status) { domElem.classList.add('activated'); } else { domElem.classList.remove('activated'); } } //bubbleUp && newStatus !== oldStatus && Utils.sendEvent(evtName, { status: newStatus }); } videoSwitch.addEventListener('click', function () { if (!videoSwitch.classList.contains('activated')) { setSwitchStatus(true, true, videoSwitch, 'roomView:videoSwitch'); } else { setSwitchStatus(false, true, videoSwitch, 'roomView:videoSwitch'); } }); |
all css selector explains
https://www.w3schools.com/cssref/css_selectors.asp
来源网站 : https://expressjs.com/en/starter/hello-world.html
npm init 初始化项目
npm install express –save 下载 express.js
新建一个 app.js 文件 ,内容为 :
1 2 3 4 5 6 7 |
const express = require('express') const app = express() const port = 3000 app.get('/', (req, res) => res.send('Hello World!')) app.listen(port, () => console.log(`Example app listening on port ${port}!`)) |
此时跟目录下只有 : app.js , node_modeles 文件夹, package.json 文件 。
接着安装 express-generator:
npm install express-generator –save 下载 express-generator
此时, package.json 的 dependence应该是这样的
1 2 3 4 |
"dependencies": { "express": "^4.17.1", "express-generator": "^4.16.1" } |
接着执行 : express -e myapp
意思是, view用 ejs模板, 建立一个名为 myapp 的应用程序
之后:
install dependencies:
$ cd myapp && npm install
run the app:
$ DEBUG=my-application ./bin/www
照做, 之后访问 : http://yourIP:3000/ , 会看到index 页面
CSS
该项目在 /myapp/public/stylesheets/ 目录会自动生成一个style.css文件 , 内容为 :
1 2 3 4 5 6 7 8 |
body { padding: 50px; font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; } a { color: #00B7FF; } |
如果要使用 less , 可以先安装一个 less 中间件:
1 |
<del><code><span class="pln">npm install less</span><span class="pun">-</span><span class="pln">middleware</span></code></del> |
然后修改 myapp/app.js , 增加:
1 |
<del>var lessMiddleware = require('less-middleware');</del> |
1 2 3 4 5 |
<del>app.use(lessMiddleware({ src : __dirname + "/public", compress : true })); app.use(express.static(__dirname + '/public'));</del> |
此方法来自 : https://stackoverflow.com/questions/11219637/using-less-with-node-js
去掉原帖中的 app.configure() 是因为 : app.configure()
is no longer part of Express 4.
接着建立一个简单的less文件, 测试能不能正常转换
**** 以上全部取消, 因为opentok-rtc用的不是这个方法 , 用的是 grunt ,方法是:
首先在 package.json 的 dependency 加上 :
这里说的 package.json 是跟目录的,而不是 myapp的
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
"grunt": "^0.4.5", "grunt-autoprefixer": "^2.2.0", "grunt-bower-task": "^0.5.0", "grunt-cli": "^1.3.2", "grunt-contrib-clean": "^0.6.0", "grunt-contrib-compress": "^1.4.3", "grunt-contrib-connect": "^2.0.0", "grunt-contrib-copy": "^0.8.1", "grunt-contrib-less": "^2.0.0", "grunt-contrib-watch": "^1.1.0", "grunt-gitinfo": "^0.1.7", "grunt-html-build": "^0.7.1", "grunt-karma": "^0.12.2", "grunt-mocha-test": "^0.12.7", |
然后 npm install
grunt 安装完成后, 会在 网站根目录生成一个 名为: Gruntfile.js的配置文件
错, 这个文件需要自己创建
内容为:(此处的路径需要参考自己的情况)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
module.exports = function(grunt) { // To-Do check what we need and add/remove as needed... [ 'grunt-contrib-less' ].forEach(grunt.loadNpmTasks); grunt.loadTasks('tasks'); // To create HTML test files from a template. To-Do: Dunno if this is even needed or not var TEST_BASE_DIR = 'test/'; grunt.initConfig({ less: { default: { files: { 'myapp/public/stylesheets/landing.opentok.css': 'less/landing.less' } } }, }); // On watch events, if the changed file is a test file then configure mochaTest to only // run the tests from that file. Otherwise run all the tests grunt.registerTask('clientBuild', 'Build css files', [ 'less' ]); grunt.registerTask('initialConfig', [ 'clientBuild' ]); grunt.registerTask('default', ['clientBuild']); }; |
可以看出来, 在这个配置文件中, less和 css 文件的路径都指定好了
因为less文件还要用到 bower component , 所以先 安装bower
首先
1 |
npm install bower --save |
之后, 建立一个 bower.json 的文件,内容为
1 2 3 4 5 6 |
{ "name": "opentok-rtc", "dependencies": { "theme": "tef-components/theme#0.2.68" } } |
此文件显示了安装bower的目的, 因为bower是一个库管理程序,
这里 bower 安装了这个 lib : https://github.com/tef-components/theme
在执行
1 |
bower install |
至此, 跟目录下出现了 bower_components 文件夹
Less
在跟目录新建文件夹 less
/home/liuyang/learntokboxrtc/expressjshwNew/less
放入需要 bower 库支持的less文件
接着在网站跟目录执行: grunt clientBuild
即可生成 css 文件
至此所有准备工作均已完成
接下来转到 : http://www.notesoflyang.com/?p=2390
room.ejs 及其 css分析
1 |
npm init |
1 |
express --view=ejs nodejslogin |
执行此命令之后 , express-genertator 会自动生成很多目录和文件
进入 nodejslogin 目录, 执行
1 |
npm install |
如果是 linux 机器, 执行 :
1 |
DEBUG=nodejslogin:* npm start |
之后, 在其他机器访问 :
http://IP:3000 即可看到初始网页
但是 , opentok程序明显没有用到 express-generator , 证明就是在 package.json 文件中, 没有 express-generator, 只有 “express”: “^4.0.0”,
也就是说, opentok没有用express脚手架 。
这是如何做到的 ?
答: 这是因为 opentok的 rest api 服务用的是 :
https://github.com/AntonioMA/swagger-boilerplate
在这个package 内部, 调用了 express . 和 express session
1 |
const express = require('express'); |
1 2 3 4 5 6 7 8 9 10 |
// This is required by passport OAuth modules... if (process.env.SESSION_SECRET) { logger.log('Enabling session management'); const sessionMiddleware = require('express-session'); app.use(sessionMiddleware({ secret: process.env.SESSION_SECRET, resave: false, saveUninitialized: false, })); } |
并且设置了例如
app.set(‘view engine’, ‘ejs’); 等 , 所以在 opentok-rtc主程序的server.js 没写这些
如何使用 ejs 模板 , 见:
https://scotch.io/tutorials/use-ejs-to-template-your-node-application
可以把每一个页面都理解为 rest api request 的 response, 只不过有的 比如 serverhealth返回 json串, 有的返回 html