顯示具有 Web 技術 標籤的文章。顯示所有文章

2023年11月20日星期一

WSGI Server + Application Server(Flask)

Flask 內部實現了精簡的 WSGI 接口, 不過這只適合在開發階段使用，因為效能不佳，所以進入到產品化階段，須使用性能高的WSGI 伺服器

WSGI Server + Application Server(Flask)

# On Windows

原本python app.py 改成用waitress 啓動web 服務

pip install waitress

waitress-serve --host=0.0.0.0 --port=5000 app:app

#On Linux

可以用 gunicorn 作為WSGI Server

References:

Flask想上線? 你還需要一些酷東西

2023年11月19日星期日

模仿瀏覽器的行為(使用session)

mimic the behavior of browser

session = requests.Session()

用sesson 送出 HTTP 請求(get/post) 會將session id 存在內部的cookie中。下次再發送session.post()或session.get() 會帶出相同的session-id . 否則會被認為這是不同的HTTP 請求。用這種方法才能將同一個請求，視為同一個對話(Session) 才能正確模仿瀏覽器的行為。

2021年10月21日星期四

[JavaScript] ES7的async/await 非同步

前端瀏覽器執行JavaScript ,都是採"同步" (即函式執行完，才會往下執行它的下一行程式碼)。

若要採用非同步(Asynchronous)方式執行，可以在函數前面加入async 關鍵詞，如 async init () ，可以使函式init() 具有非同步的處理能力，即init()函內可以包含有需要等待的工作敍述，對需要等待的工作可以在該敍述前，加上await 關鍵字。

<case 左方程式區塊 >

程式呼叫了init()函式, 而在init()函式內因為遇到了await a() 這一行，故init() 會直接返回，去執行console.log('3'), 而原本await a() 的下一行, 會一直等到 a() 函式執行結束後才會開始執行。

因為await, 所以await a() 的下一行是在未來某個時間點才又繼續執行，這就是非同步函數呼叫的概念。

<case 右方程式區塊 >

雖然 async init() 是一個可以允許非同步執行的函數，但這種寫法then()=> { }，會使得console.log(3), 會在init()函式執行完才會執行。

<!DOCTYPE html>

<html>

<body>

<h2>JavaScript async / await</h2>

async function myDisplay() {

console.log('1')

console.log('2')

console.log('3')

}

myDisplay();

console.log('4')

console.log('5')

</script>

</body>

</html>

輸出為 ==> 1 2 3 4 5

async function myDisplay() {

console.log('1')

await console.log('2')

console.log('3')

}

</script>

輸出為 ==> 1 2 4 5 3

async function myDisplay() {

await console.log('1')

await console.log('2')

console.log('3')

}

myDisplay();

console.log('4')

console.log('5')

</script>

</body>

</html>

輸出為 ==> 1 4 5 2 3

2018年6月4日星期一

HTML5-WebRTC

WebRTC is an open source project to enable realtime communication of audio, video and data in Web and native apps.

WebRTC是“網路即時通信”（Web Real Time Communication）的縮寫，它主要用來讓瀏覽器即時獲取和交換視頻、音訊和資料。

WebRTC共分三個API。

· MediaStream（getUserMedia）

· RTCPeerConnection

· RTCDataChannel

getUserMedia主要用於獲取視頻和音訊資訊，後兩個API用於瀏覽器之間的資料交換。

https://webrtc.github.io/samples/src/content/getusermedia/gum/

Demo:

https://simpl.info/getusermedia/

Display the video stream from getUserMedia() in a video element.
The MediaStream object stream passed to the getUserMedia() callback is in global scope, so you can inspect it from the console.

2017年8月7日星期一

常常弄不清楚的 CSS Selector

CSS class definition with multiple identifiers

常常弄不清楚的 CSS Selector

.class1.class2 will match only the elements that have both of them classes defined.
```
.class1.class2 { background: red; }
<div class="class1 class2"></div>
```

.class1, .class2 will match the elements with .class1 or .class2

.class1, .class2 { background: yellow; }
<div class="class1"></div>
<div class="class2"></div>

.class1 .class2 will match only the elements with class2 within elements with class1.

.class1 .class2 { background: blue; }
<div class="class1">
    <div class="class2"></div>
</div>

善用工具:

開Chrome瀏覽器 F12 開發者工具偵察現有的網頁 CSS 樣式規則,判斷產生該效果的 CSS 樣式設定來源

2017年8月6日星期日

HTML Color Codes

1在CSS中常常須要設定顏色, 例如要設定 background-color: #4CAF50; 常常須要RGB色碼, 可以到這裡去找快速查詢

http://html-color-codes.info/

2) 若是想要知道某一個圖所用的"顏色", 不知道色碼時怎麼辦 ? 可以先 [Print Screen] , ,再用小畫家, 用"點滴"查看color

2017年7月30日星期日

題目一: CSS + AJAX + JQuery + Node.js 應用

題目一: CSS + AJAX + JQuery + Node.js 應用

功能說明:

1. 瀏覽器利用AJAX 送出HTTP GET，URL路徑為/sensor/temp , 伺服端 (Node.js)會傳回Raspberry Pi CPU溫度.
2. 伺服端傳回格式為JSON , 如右格式: {“Sensor”: [{“Temp”:28}]}
3. 瀏覽器頁面必須及時更新溫度值, 並呈現如下內容. 溫度圖表設為20格,溫度範圍: 45~65 ℃

4. 當溫度 <= 55℃ 顯示綠色, >= 55 ℃ 黃色, >=60時℃顯示紅色

提示:

1. 讀取Raspberry Pi CPU溫度: vcgencmd measure_temp

cat /sys/class/thermal/thermal_zone0/temp

2. 及時更新溫度的方式使用JQuery

3. 參考課程範例: WebFrontend/JQuery/industrial.js/demo.html

4. 參考課程範例: Node_basic/example03/spwan.js

完成結果:

2016年10月23日星期日

MongoDB – Allow remote access

MongoDB 預設只允許local (127.0.0.1) 連入操作, 改成可以遠端可以操作

(1) sudo vim /etc/mongod.conf

把 bindIp 改成 0.0.0.0

(2) 修改後要重新啓動MongoDB

sudo service mongod restart

在 netstat 可以看到 Port 27017 在 Listen

tcp 0 0 0.0.0.0:27017 0.0.0.0:* LISTEN

Note: 若有防火牆時, tcp port 27017 必須允許任可人連入

Robomong --MongoDB 前端資料庫管理界面

可以去下載 Robomong (https://robomongo.org/), 這是一個MongoDB 前端資料庫管理界面, 可以遠端連線到MongoDB Server上

"Create" 新增連線", 右下方"connect" 連線到MognoDB

輸入MongoDB IP 及Port (預設27017) , 左下角有"Test"可以測試一下是否連線正常

點選你的collection, 顯示全部資料 (Documents)

選擇用Table 方式呈現

點選你的collection 按右鍵, 會顯示可以用的操作. 如Collection 更名、複製Collection、刪除Collection等, 也可以插入資料(Document)等

對Documents 中的欄位, 可以按右鍵進行文字編輯, 但須符合JSON格式 ,修改完後 "Save" 離開

How To Install MongoDB on Ubuntu 14.04

2016年9月11日星期日

2016年9月10日星期六

瀏覽器的能力將會愈來愈強,, 別停留在只是傳輸網頁文件而已, 那已經是20年以前的時代。Web APP 程式開發將成為應用程式開發的主流, 未來任何東西都會在網路上, 應用程式也幾乎依賴瀏覽器來執行!

換言之，瀏覽器存在就可以跑任何應用程式, 我們開發者不須要再各別為Windows、Linux、MacOS, Android APP、iPhone/iPad 等平台寫程式了, 真的寫不完，不要說寫連維護都很難，因為沒有這多資源，可以養這麼多人去維護這麼多平台的程式碼,。

當然，可以去找一個可以精通兩個平台以上的工程師, 但實在太少了

瀏覽器的功能會逐漸增強, 用AJAX, WebSocket(一種TCP Socket) 就可以用瀏覽器進行雙向多工通訊，透過Canvas就可以在瀏覽器進行2D/3D繪圖, 這些都是瀏覽器功能不斷演進才有的面貌。

程式在那裡下載?? 阿榮福利味 ?! No, 你會在類似 Chrome 線上應用程式商店找軟體, 如同手機習慣在Google Play, APP Store 線上安裝。而程式開發者，也剛好透過這樣的線上APP 電商, 銷售你的軟體! 不用再自己壓CD及做說明手冊，還要實體盒裝上架，也不用自己做平台做軟體發佈及版本更新。這很重要，因為以前軟體要行銷到不同國家,這太有難度了,. 現在已有建好的一個共通平台,如Google play，使得軟體行銷全球的門檻降低了, 就只怕軟體功能不夠牛而已。

另一方面，因為都是用瀏覽器來跑程式，有一天很多人將會忘記 Install Wizard這個東西, 就是那個用來不斷按[下一步] 安裝程式動作的工具軟體，Install Wizard將成為少數人的開發經驗。現在，不能執行程式, 多半是網路登入帳密自己忘記。

底下整理了 Web 前後端技術架構, 希望對新手在學習Web APP開發上，有一個明確的方向

Web Front-end:

HTML/CSS
JavaScript
JQuery
AJAX
WebSocket (socket.io-client)

Web Framework: BootStrip, React, AngularJS

Web Back-end (以Node.js架構為例)

1.使用Express作為 node.js web框架
2.使用Handlebars 作為 HTML template engine
3.使用Socket.io作為WebSocket
4.使用Mongoose 存取NoSQL MongoDB資料庫

2016年7月10日星期日

Node.js Socket.io 範例 --聊天室

Node.js Socket.io

1) 安裝Node.js

下載 node.js binary code (v 6.3.1) 並複製到/usr/local 下

wget https://nodejs.org/dist/v6.3.1/node-v6.3.1-linux-x64.tar.xz
tar Jxvf node-v6.3.1-linux-x64.tar.xz
cd node-v6.3.1-linux-x64/
sudo cp * -r /usr/local/
node -v ==> 會輸出 v6.3.1

2) 安裝 Express

npm install -g express-generator

2) 從GitHub程式下載, 用這個範例快速學習Socket.io

git clone https://github.com/guille/chat-example.git
cd chat-example;
sudo npm install --save
# 執行node 程式
node index.js

出現==> listening on *:3000

開兩個瀏覽器連到 http://xxx.xxx.xxx.xxx:3000

######## index.html ########

<body>
<ul id="messages"></ul>
<form action="">
<input id="m" autocomplete="off" /><button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js"></script>
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script>
var socket = io();
$('form').submit(function(){
socket.emit('chat message', $('#m').val());
$('#m').val('');
return false;
});
socket.on('chat message', function(msg){
$('#messages').append($('<li>').text(msg));
});
</script>
</body>

######## index.js ########

// express 處理route ,url path 作為主要的程式app
// 軟體層次 : io(http(express))

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){ // http;//xxx.xxx.xxx.xxx: 3000 ,傳回/index.html
res.sendFile(__dirname + '/index.html');
});

// 再收到'connection' event後會獲得socket, 可以作socket.on('event', handler()) 進行讀socket
// 送出是透過 io.emit(''event', message);

io.on('connection', function(socket){
socket.on('chat message', function(msg){
io.emit('chat message', msg);
});

socket.on('disconnect', function(){ //斷線時即browser關閉

console.log('user disconnected');

});

});

http.listen(3000, function(){ //listen on port 3000
console.log('listening on *:3000');
});

參考資源:

前端網頁技術

前端網頁技術以此HTML、CSS、Javascript為基礎

HTML to define the content of web pages
CSS to specify the layout of web pages
JavaScript to program the behavior of web pages
----JSON to exchange/transfer data, {"key1":"value1", "key2":"value2",.... }

HTML vs XHTML :

1) XHTML 屬性值不能省略
HTML的一部份的屬性值沒有屬性值(checked、selected、nowrap、disabled、noresize等屬性)，但是XHTML必須要有屬性值，其屬性值和屬性名稱相同。
<input type = "radio" checked = "checked" />
<option value = "F" selected= "selected" >F</option>

2) id屬性取代name屬性
HTML的一部份的元素(a、applet、frame、form、iframe、frame、map、img等元素)可以使用name屬性，但是XHTML1.0不採用name屬性，將由id屬性取代。

JSON

Data is in name/value pairs : data-->"name":value
Data is separated by commas: data1, data2,
Curly braces hold objects : {object}--> { data1, data2, ..}
Square brackets hold arrays : [{object},{object},...]

This JSON syntax defines an employees object: an array of 3 employee records (objects):

{ --> object
"employees":[ --> Array
    {"firstName":"John", "lastName":"Doe"}, ---> {object}
    {"firstName":"Anna", "lastName":"Smith"}, ---> {object}
    {"firstName":"Peter", "lastName":"Jones"} --->{object}
]
}
-->

Converting a JSON Text to a JavaScript Object

var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';

Example:

<html>
<body>

<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[2].firstName + " " + obj.employees[1].lastName;
</script>

</body>
</html>

output ==> Peter Smith