sass和less哪個好，009 - CSS預處理器less sass SAML SSO 單點登錄 websocket socket.io

009_css預處理器less  sass  saml sso 單點登錄  websocket##   less

安裝： npm install -g less
命令： lessc style.less style.css> 注意： .rect( 123, 456, 789){}  括號中是‘,’逗號，不能用“;” 分號

【1】LESS是基于JavaScript運行,所以LESS是在客戶端處理;Sass是基于Ruby的，是在服務器端處理的.
【2】sass支持老的語法，可以不包含花括號和分號
【3】sass的變量必須是$開始，然后變量名和值使用冒號隔開，跟css的屬性一致
【4】sass:  @include引入    less:   .class 引入

變量、嵌套、mixin（混合）、繼承、導入(import)、顏色函數、


混合方法不一樣，
sass：
@mixin error($borderWidth: 2px) {border: $borderWidth solid #F00;color: #F00;
}less：
.error(@borderWidth: 2px) {border: @borderWidth solid #F00;color: #F00;
}.rect(@width1:100px,@height1:100px) {width: @width1;height: @height1;
}定義變量：
@base: #ff6700;
.centerss{position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;
}調用：
div {.centerss();
}css預處理器

## 區別
http://www.cnblogs.com/wangpenghui522/p/5467560.html1.編譯環境不一樣

Sass的安裝需要Ruby環境，是在服務端處理的，而Less是需要引入less.js來處理Less代碼輸出css到瀏覽器，也可以在開發環節使用Less，然后編譯成css文件，
直接放到項目中，也有 Less.app、SimpleLess、CodeKit.app這樣的工具，也有在線編譯地址。

2.變量符不一樣，Less是@，而Scss是$，而且變量的作用域也不一樣。

3.Sass支持條件語句，可以使用if{}else{},for{}循環等等。而Less不支持。

    

##   SASS  

. Sass簡介
Sass 是一種css預處理器,CSS 預處理器定義了一種新的語言，其基本思想是，用一種專門的編程語言，為 CSS 增加了一些編程的特性，將 CSS 作為目標生成文件，然后開發者就只要使用這種語言進行編碼工作。


/*變量默認只能在屬性值中使用

差值：
選址器和屬性部分用差值 #{$s}*/$a:13;$a:12 !default;  //默認
   @debug $a;$aa: 10rem;$b: 10px;$c: null;@debug $aa;@debug $b;@debug $c;$d: $a * 2;$border: '1px solid black';@debug $d;@if ($a > 7){}npm install -g node-sass  安裝node-sass的軟件     node-sass -vnpm install -g cnpm  //中文版 npm命令改為：
    cnpm install -g node-sass任何一個文件中都有 兩個文件夾  .    ...  當前文件夾
        .. 上一層

cmd中復制命令：右鍵--標記--回車   C:\Users\Administrator\AppData\Roaming\npm把文件拖過去

    node-sass -w index.scss index.css
    node-sass -w index.scss index.css --output-style expanded



###    占位符 %      生成高效率群組選擇器
   %  繼承的方法   --> 群組選擇器

###    擴展/繼承(@extend)

%mt5 {margin-top: 5px;
}
%pt5{padding-top: 5px;
}.btn {@extend %mt5;@extend %pt5;
}###  for 循環
@for $i from 1 through $num{#{$box}:nth-child(#{$i}){animation: drop 1s cubic-bezier(0.38, 1.48, 0.22, 1.32) ( $i - 1 ) * 0.1s both;}}###    each 遍歷
$arr: 'one','two','three';
@each $v in $arr{.atem-#{$v}{color:red;}
}/*html中遍歷：
foreach($data as $v){}*/##  單點登錄    saml sso

基于SAML的單點登錄介紹
http://blog.csdn.net/csethcrm/article/details/20694993單點登錄SSO（cookie和ticket）實現
http://blog.csdn.net/z1729734271/article/details/52425746基于 SAML 的 WebSphere Application Server 單點登錄的場景設計
https://www.ibm.com/developerworks/cn/websphere/library/techarticles/1012_zhangt_saml/1012_zhangt_saml.html**SAML 作用**
SAML 主要包括三個方面：
1.認證申明。sass和less哪個好？表明用戶是否已經認證，通常用于單點登錄。
2.屬性申明。表明 某個Subject 的屬性。
3.授權申明。表明 某個資源的權限。

它是一個基于XML的標準，用于 **在不同的安全域(security domain)之間交換認證和授權數據**。sas sql、

SAML Assertions 斷言：定義交互的數據格式 (XML)
SAML Protocols 協議：定義交互的消息格式 (XML+processing rules)            ** [請求--響應協議] **
SAML Bindings 綁定：定義如何與常見的通信協議綁定 (HTTP,SOAP)
SAML Profile 使用框架：給出對 SAML 斷言及協議如何使用的建議 (Protocols+Bindings)>  在 SAML 協議標準中出現的兩個角色，
        一個是 Identity Provider(IdP)【身份提供者, 身份提供商】，通常 IdP 負責創建、維護和管理用戶認證。
        一個是 Service Provider(SP)【服務提供者, 服務提供者】，通常 SP 控制用戶是否能夠使用該 SP 提供的服務和資源。
        
登錄成功后，系統會自動給你的瀏覽器設置cookie，證明你已經登錄過了。
當你再訪問這個應用的需要保護的URL的時候，系統還是要進行安全檢查的，但是這次系統能夠發現相應的cookie。


上圖就是一個利用cookie做單點登錄的原理圖，案例為用戶dgh（密碼123）登錄www.qiandu.com，之后又登錄mail.qiandu.com。流程如下：
  第一步：用戶輸入用戶名/密碼（dgh/123）登錄到www.qiandu.com。less與sass哪個更好？
  第二步：www.qiandu.com處理登錄邏輯，并且將用戶信息通過cookie的方式返回到客戶端（最好加密用戶信息）。
  第三步：用戶訪問mail.qiandu.com，瀏覽器自動將用戶信息攜帶到mail.qiandu.com，通過過濾器（filter）處理用戶的登錄請求。
  第四步：過濾器從cookie中獲取用戶信息，登錄，返回用戶訪問界面。這樣用戶就只登錄一次，就訪問了兩個網站了。

    
1. user訪問應用服務
2. [點登錄]WEB APP1 生成SAML請求  -->
3. 定向到瀏覽器訪問SSO URL -->
4. [login get'/sso'] 統一認證中心    解析SAML請求，需提供有效登陸憑證或cookie信息進行認證。 -->跳轉到登錄頁面 輸入ID password    -->
5. [callback.js post'/sso'] 進行認證，認證成功，以cookie方式存儲用戶相關信息，構造斷言，生成SAML響應。css預處理器的優缺點？  -->
6. 編碼后的響應定向到瀏覽器訪問ACS
7. WEB APP1 使用IDP的公鑰驗證SAML響應。驗證成功，登錄app。



## shell 
同時它又是一種程序設計語言。作為命令語言，它交互式解釋和執行用戶輸入的命令或者自動地解釋和執行預先設定好的一連串的命令；
作為程序設計語言，它定義了各種變量和參數，并提供了許多在高級語言中才具有的控制結構，包括循環和分支。

文字操作系統與外部最主要的接口就叫做shell。shell是操作系統最外面的一層。新手用sass還是less。shell管理你與操作系統之間的交互：等待你輸入，
向操作系統解釋你的輸入，并且處理各種各樣的操作系統的輸出結果。





##  websocket socket.io
Websocket是什么？

Websocket是一種協議，它本質上是一個基于TCP的協議，它由通信協議和編程API組成，WebSocket能夠在瀏覽器和服務器之間建立雙向連接， 
以基于事件的方式，賦予瀏覽器實時通信能力。既然是雙向通信，就意味著服務器端和客戶端可以同時發送并響應請求，而不再像HTTP的請求和響應。

為了建立一個WebSocket連接，客戶端瀏覽器首先要向服務器發起一個HTTP請求，這個請求和通常的HTTP請求不同，包含了一些附加頭信息，
其中附加頭信息”Upgrade: WebSocket”表明這是一個申請協議升級的HTTP請求，服務器端解析這些附加的頭信息然后產生應答信息返回給客戶端，
客戶端和服務器端的 WebSocket連接就建立起來了，雙方就可以通過這個連接通道自由的傳遞信息，并且這個連接會持續存在直到客戶端或者服務器端的
某一方主動的關閉連接

websocket的產生背景

在Websocket出現之前，瀏覽器與服務器之間通過http只能實現單向的通信。在此之前，要實現瀏覽器之間的即時通信，一般采用Comet來模擬。
Comet是一種服務器向頁面推送消息的技術，這種技術可以讓信息實時推送到頁面，也算是可以比較完整地實現實時通信，但是效率低下。lesssass哪個好用。
實現Comet的方式主要有兩種，一種是輪詢(polling)，一種是流。
輪詢，就是客戶端通過一定的時間間隔以頻繁請求的方式向服務器發送請求，來保持客戶端和服務器端的數據同步。問題很明顯，當客戶端以固定頻率向服
務器端發送請求時，服務器端的數據可能并沒有更新，帶來很多無謂請求，浪費帶寬，效率低下。
第二種實現Comet的是HTTP流。流不同于輪詢，它在頁面的整個生命周期內只使用一個HTTP連接，通過服務器端語言的緩沖區刷新機制來將消息推送出去。

除了Comet，通過Flash的API也是可以實現Socket的。css預處理器less、AdobeFlash 通過自己的 Socket 實現完成數據交換，再利用 Flash 暴露出相應的接口為 
JavaScript 調用，從而達到實時傳輸目的。此方式比輪詢要高效，但是隨著今年Flash正式宣告退出歷史舞臺，這種方式現在的存在意義不大。
由此看出，傳統 Web 模式在處理高并發及實時性需求的時候，會遇到難以逾越的瓶頸，我們需要一種高效節能的雙向通信機制來保證數據的實時傳輸。
在此背景下，基于 HTML5 規范的、有 Web TCP 之稱的 WebSocket 應運而生。


websocket的實現原理

在實現websocket連線過程中，需要通過瀏覽器發出websocket連線請求，然后服務器發出回應，這個過程通常稱為“握手” 。在 WebSocket API，
瀏覽器和服務器只需要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。locust websocket。兩者之間就直接可以數據互相傳送。


###  Socket.io模塊

Socket.io是基于Nodejs生態的，但是做Nodejs所不能實現的WebSocket的庫。就像Express之于Nodejs、jQuery之于Javascript，
***Socket.io是對Node語言關于WebSocket所有API的封裝和拓展，是一個應用框架。***

Socket.IO是一個開源的WebSocket庫，它通過Node.js實現WebSocket服務端，同時也提供客戶端JS庫。Socket.IO支持以事件為基礎的實時雙向通訊，
它可以工作在任何平臺、瀏覽器或移動設備。

Socket.IO支持4種協議：WebSocket、htmlfile、xhr-polling、jsonp-polling，它會自動根據瀏覽 器選擇適合的通訊方式，
從而讓開發者可以聚焦到功能的實現而不是平臺的兼容性，同時Socket.IO具有不錯的穩定性和性能。sass教程。
Socket.io的作用主要是將webSocket協議應用到所有的瀏覽器。該模塊主要應用于實時的長連接多請求項目中，
例如在線聯網游戲、實時聊天、實時股票查看、二維碼掃描登錄等。
Socket協議存在服務端和客戶端，因此要實現一個socket服務時，根據socket的服務端和客戶端API分別實現其邏輯。服務端啟動進程等待客戶端的連接。


> Socket.io基本使用方法：

【1】服務端：
npm install socket.io 安裝socket.iovar io=require('socket.io').listen(8081);
或者： 
var app = require('express')();
var server = require('http').Server(app);
var io = require('socket.io')(server);【2】服務端：
io.on(‘connection’,function(socket));//監聽客戶端連接,回調函數會傳遞本次連接的socket
socket.on(‘String’,function(data));//監聽客戶端發送的信息
例子：
socket.on('my other event',function(data){console.log(data);
});
socket.emit(‘String’, data);//給該socket的客戶端發送消息
socket.emit('news',{hello:'world'});socket.on('disconnect', function () {//斷開連接
    io.emit('user disconnected');});【3】服務端：
io.sockets.emit(‘String’,data);//給所有客戶端廣播消息
io.sockets.socket(socketid).emit(‘String’, data);//給指定的客戶端發送消息
廣播消息：
//給除了自己以外的客戶端廣播消息
socket.broadcast.emit("msg",{data:"hello,everyone"}); 
//給所有客戶端廣播消息
io.sockets.emit("msg",{data:"hello,all"});
分組
socket.join(room1);//加入room1分組；
socket.leave(room1);//退出分組
對分組中的用戶發送信息
socket.broadcast.to('group1').emit('event_name', data);//不包括自己
io.sockets.in('group1').emit('event_name', data);//包括自己
broadcast方法允許當前socket client不在該分組內

【4】客戶端：
引入js：<script src="js/socket.io.js"></script>
<script>
var socket=io.connect('http://localhost:8081');//連接服務器
socket.on('news',function(data){console.log(data);socket.emit('my other event',{clinetMessage:'client data'});
});
</script>【5】客戶端：
客戶端socket.on()監聽的事件：
connect：連接成功
connecting：正在連接
disconnect：斷開連接
connect_failed：連接失敗
error：錯誤發生，并且無法被其他事件類型所處理
message：同服務器端message事件
anything：同服務器端anything事件
reconnect_failed：重連失敗
reconnect：成功重連
reconnecting：正在重連
當第一次連接時，事件觸發順序為：connecting->connect；當失去連接時，事件觸發順序為：disconnect->reconnecting（可能進行多次）->connecting->reconnect->connect。