node-js – Records And Memorys

执行后，发现之前 node -v 显示的是 node/9.11.2

升级后反而是 node/8.17.0

January 13, 2021January 15, 2021

node.js 建video server

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

参考文章： https://stackoverflow.com/questions/38104090/how-can-i-read-files-from-directory-and-send-as-json-to-client

可用的实现为：

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}!`))

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

June 4, 2020June 4, 2020

建一个node.js server , 能同时处理 post 和 get

1 : 学 — https://github.com/franciscop/server

June 4, 2020

centos 6 32bit 安装 node.js 最新版的方法

1 先清缓存

<span class="pln">npm cache clean </span><span class="pun">-</span><span class="pln">f</span>

1	<span class="pln">npm cache clean </span><span class="pun">-</span><span class="pln">f</span>

2 安装工具： n

sudo npm install n -g

1	sudo npm install n -g

n 是一个node.js 的版本控制工具

3 ：用 n 来安装最新版

sudo n latest

1	sudo n latest

4 安装之后，发现执行 node -v 显示的还是旧版，这是因为还需要关掉当前的 terminal，新开一个

January 9, 2020January 9, 2020

node.js 如何返回json

用这句代码

app.get('/', (req, res) => res.json({ answer: 42 }));

1	app.get('/', (req, res) => res.json({ answer: 42 }));

具体实现为：

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}!`))

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 账号登陆

November 5, 2019November 6, 2019

less 详解

how to compile

in opentok-rtc project , use grunt to compile less into css .

Grunt 是一个插件化的打包工具，比如编译 less的插件就是 grunt-contrib-less, 安装方法是：

npm install grunt-contrib-less --save-dev

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的插件

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']);
};

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 是自定义的任务名

How to add bower lib

在 opentok-rtc项目中，还包括了 bower lib的引用 ,

in Gruntfile.js , it figure out where to find source less and where to store dest css , by :

    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'
        }
      }
    },

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'

}

use which less lib ? in tokbox-rtc . it use bower lib

npm install bower –save

之后新建 bower.json

bower install

opentok-rtc room page css 分析

这个是 image ，代码为：

<div class="icon-container">
        <i data-icon="tokbox_logo"></i>
</div>

</div>

以data 开头的是 html5 新增的自定义属性，可以是 data-whatever , 具体定义见 icons.less

<div class="videoSwitch">
          <a id="videoSwitch" class=""><i data-icon="videoSwitch"></i><span>Stop receiving video</span></a>
</div>

<a id="videoSwitch" class=""><i data-icon="videoSwitch"></i><span>Stop receiving video</span></a>

</div>

这个是相当于radio的按钮，可通过点击 enable 或者 not , 用 js 实现，给 click 事件加 eventlistener , 从而在 class 加 activate 或者去掉，示例代码：

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');
          }
});

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

October 31, 2019November 27, 2019

***** node.js server 的 hello world , 用 express.js , less , bower

来源网站： https://expressjs.com/en/starter/hello-world.html

- 安装 express. js

npm init 初始化项目

npm install express –save 下载 express.js

新建一个 app.js 文件，内容为：

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}!`))

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应该是这样的

"dependencies": {
"express": "^4.17.1",
"express-generator": "^4.16.1"
}

"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文件，内容为：

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

body {

padding: 50px;

font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;

}

a {

color: #00B7FF;

}

~~如果要使用 less , 可以先安装一个 less 中间件：~~

<del><code><span class="pln">npm install less</span><span class="pun">-</span><span class="pln">middleware</span></code></del>

1	<del><code><span class="pln">npm install less</span><span class="pun">-</span><span class="pln">middleware</span></code></del>

~~然后修改 myapp/app.js , 增加：~~

<del>var lessMiddleware = require('less-middleware');</del>

1	<del>var lessMiddleware = require('less-middleware');</del>

<del>app.use(lessMiddleware({
    src      : __dirname + "/public",
    compress : true
  }));
app.use(express.static(__dirname + '/public'));</del>

<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的

    "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",

"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的配置文件~~

错，这个文件需要自己创建

内容为：（此处的路径需要参考自己的情况）

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']);
};

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

首先

npm install bower --save

1	npm install bower --save

之后，建立一个 bower.json 的文件，内容为

{
  "name": "opentok-rtc",
  "dependencies": {
    "theme": "tef-components/theme#0.2.68"
  }
}

{

"name": "opentok-rtc",

"dependencies": {

"theme": "tef-components/theme#0.2.68"

}

此文件显示了安装bower的目的，因为bower是一个库管理程序，

这里 bower 安装了这个 lib : https://github.com/tef-components/theme

在执行

bower install

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分析

October 23, 2019October 23, 2019

github 其他的tokbox项目

https://github.com/opentok/opentok-node

如何用 node.js 写一个server , 包括如何创建 session , token , work with archive

https://github.com/opentok/opentok-web-samples

各种 web client sample, 包括angular js , vue 等

https://github.com/opentok/learning-opentok-node

学习如何用 node.js 写 server

October 10, 2019October 10, 2019

expressjs + ejs 各种login 例子

简单的

https://github.com/FSojitra/Node.js-Register-Login-App

September 26, 2019September 27, 2019

How to create a nodejs login app with session

come from : https://itnext.io/creating-an-expressjs-app-using-ejs-express-session-with-redis-9fee113023c6

建立目录 NodeJSLogin , 进入目录

npm init

1

npm init

之后，执行

express --view=ejs nodejslogin

1

express --view=ejs nodejslogin

意为：用ejs 为引擎，用 express-generator做脚手架工具，建立一个名为 nodejslogin 的项目。

执行此命令之后 , express-genertator 会自动生成很多目录和文件

进入 nodejslogin 目录，执行

npm install

1	npm install

如果是 linux 机器，执行：

DEBUG=nodejslogin:* npm start

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

const express = require('express');

1	const express = require('express');

  // 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,
    }));
  }

// 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

Category: node-js

node.js 如何升级版本

node.js 建video server

建一个node.js server , 能同时处理 post 和 get

centos 6 32bit 安装 node.js 最新版的方法

node.js 如何返回json

less 详解

***** node.js server 的 hello world , 用 express.js , less , bower

github 其他的tokbox项目

expressjs + ejs 各种login 例子

How to create a nodejs login app with session