***** 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 文件 ,内容为 :

此时跟目录下只有 :  app.js ,  node_modeles 文件夹, package.json 文件 。


接着安装  express-generator: 

npm install express-generator –save   下载  express-generator

此时, package.json 的 dependence应该是这样的

接着执行 :  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文件 , 内容为 :

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

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

此方法来自 :  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的

然后 npm install

grunt 安装完成后, 会在 网站根目录生成一个 名为: Gruntfile.js的配置文件

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

内容为:(此处的路径需要参考自己的情况)

 

可以看出来, 在这个配置文件中, less和 css 文件的路径都指定好了


因为less文件还要用到 bower component , 所以先 安装bower

首先

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

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

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

在执行

 

至此, 跟目录下出现了 bower_components 文件夹


Less 

在跟目录新建文件夹 less

/home/liuyang/learntokboxrtc/expressjshwNew/less

放入需要 bower 库支持的less文件

接着在网站跟目录执行: grunt clientBuild

即可生成 css 文件


至此所有准备工作均已完成

接下来转到 :  http://www.notesoflyang.com/?p=2390

room.ejs 及其 css分析

 

 

 

 

opentok-rtc修改后大致的功能和实现

1 : 用户可以用学生或者老师的身份登陆

a) 如果是老师 :  可以

进入自己发布过的session , 就是显示所有room

什么是自己的session ?

当用户以用户名登陆之后, 如果创建room, tokbox会在远端记录一个 session id , 但是不记录用户名,  所以, 将 session id 和 用户名连接起来是要实现的功能

不能把 session id 和用户名连一起, 因为tokbox网站明确说:

When possible, do not reuse session IDs between different video chat conversations. Instead, generate new session IDs for each distinct video chat on your application. 

所以, 要存的是 username 和 room number的对应关系 , 还有 room template 

存 username 和 room number的对应关系 , 用 

 

 

不对, 用 pushToKey , 因为 一个username可能有多个 room , 取时用 getKeyArray

但是 , archive 从属于 session ,  如果要列出room 的archive,只能用 session id 查 , room number 和 session id 的对应关系 ,存在于 redis数据库\

b) 如果是学生, 能看到自己所有订阅 的room

 


 

 

redis查key :

查 key的 value

 

upload , del  archive ,

invite student

enable or not student video or audio

share screen

white board

b)   如果是学生 ,  可以

看到一个 所有 teacher 的 列表页面, 并选择进入room ,  列表应表明此room的所有者是否正在线, 此room的当前在线人数 .

这就需要有一个函数能查询到所有的session ,以及session对应的room number,How To ?

 

javascript 笔记

  •  reduce()       ES5 新增

 

  • promise  ES6 新增

 

  • 变量定义的非常灵活

a)

 


opentok-rtc 点击 enterroom 之后, 会转到这个网址

http://47.52.61.15:3000/room/11?userName=22

11是会议名, 22是用户名

 

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

 

 

javascript promise 详解

Promise is an object representing the eventual completion or failure of an asynchronous operation

promise 代表一个异步事件的完成或失败。


Essentially, a promise is a returned object to which you attach callbacks, instead of passing callbacks into a function.

本质上, promise 是一个 被返回的object ,  在这个object 内可以附加回调函数 ,以代替原来的在函数中指定回调函数 。


 

Imagine a function, createAudioFileAsync(), which asynchronously generates a sound file given a configuration record and two callback functions, one called if the audio file is successfully created, and the other called if an error occurs.

Here’s some code that uses createAudioFileAsync():

在原先的写法,  当调用一个异步函数的时候, 需要在参数位置指定它的回调函数, 比如异步生成一个语音文件时,指定它的成功和失败的回调 ,代码如下:

 


在现代的javascript 当中, 是返回一个promise

上一句代码是以下2句的简写形式:

 


.then 代表promise 确实返回了什么东西, 即使是 null ,

以 opentok-rtc 为例, 它从永久设备取数的方法是调用 swagger-boilerplate的 getKey 方法

在 swagger-boilerplate的 serverPersistence.js 文件

也就是说, 如果没有这个key , 返回 null , 但这并不会触发 promise 的 catch , 而是触发 resolve, 因为确实返回了什么


promise 和事件(event) 有点像, 但是, promise 只能成功或者失败一次, event可以发生多次。

A promise can only succeed or fail once. It cannot succeed or fail twice, neither can it switch from success to failure or vice versa.

If a promise has succeeded or failed and you later add a success/failure callback, the correct callback will be called, even though the event took place earlier.

promise 可以在发生之后很久被调用, event不可以


A promise can be:

  • fulfilled – The action relating to the promise succeeded
  • rejected – The action relating to the promise failed
  • pending – Hasn’t fulfilled or rejected yet
  • settled – Has fulfilled or rejected

promise可以有以上四种状态


如何处理 promise 的成功和失败


怎么理解这几句 :

变量= resolve是什么意思 ?


 

 

 

参考文章 :

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises   —– how to use promise


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise    — introduce promise


 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/resolve

专门讲  resolve

skill or need addon inplement skill

  • given all enemy within X range a  level one tong ,   by priest
  • when multi pull , remberber use an’tu’su’er ‘s  hand  as main hand weapon
  • charge and intercept use just one key

改为更简洁的:  change stance use another key

  • the spell of warrior which not cause public cooldown
  • conditional cast

conditional

 

tokbox session 讲解

From  https://tokbox.com/developer/guides/create-session/

 

session 可以理解为一个room , 测试账号创建的session 是否有限制 ?

没有限制,  但是在tokbox的设计, 每个人应该只有一个 session

session 并不过期 , 也不能被显式销毁

OpenTok sessions do not expire. However, authentication tokens do expire. Also note that sessions cannot explicitly be destroyed.

 

用户是否可以有多个session ?    No


archive 从属于 session ,


session 自带一些事件, 可以给这些事件设置回调, 比如统计room的在线人数

 


如果在 js 用 createSession 函数创建了session , 怎么取创建的session ID

 

 

room.ejs analyze

room.ejs 是 https://github.com/opentok/opentok-rtc

此项目最重要的一个页面, 涉及到全部的api  ,


  • 怎么实现的 点击 message 实现右边文本框的显隐

a) room.ejs 有

然后

roomView.js

这里应该着重理解 sendEvent这个函数,

当执行这句时:  Utils.sendEvent(‘roomView:chatVisibility’, visible);

 


CSS 部分

  • 怎么显示 icon   ,  room.ejs 有这样的片断

  • 这里的data-icon是 html5新增属性, data- attributes are attributes for private use. I.e., anybody can make up any data- attribute and do with it whatever he wants.

    也就是说, data- 后可以接自己定义的任何字符 , 参考文章:

https://johnresig.com/blog/html-5-data-attributes/

——-

in room.less :

 

in