參考:https://www.nodebeginner.org/index-zh-tw.html
1. 開啟PowerShell並安裝
npm install express <- 框架
npm install ws <- websocket
2. service.js
const WebSocket = require('ws');
const server = new WebSocket.Server({ port: 8080 });
server.on('open', function open() {
console.log('connected');
});
server.on('close', function close() {
console.log('disconnected');
});
server.on('connection', function connection(ws, req) {
const ip = req.connection.remoteAddress;
const port = req.connection.remotePort;
const clientName = ip + port;
console.log('%s is connected', clientName)
ws.send("Welcome " + clientName);
ws.on('message', function incoming(message) {
console.log('received: %s from %s', message, clientName);
server.clients.forEach(function each(client) {
if (client.readyState === WebSocket.OPEN) {
client.send( clientName + " -> " + message);
}
});
});
});
3. client.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebSocket Chat</title>
</head>
<body>
<script type="text/javascript">
var socket;
if (!window.WebSocket) {
window.WebSocket = window.MozWebSocket;
}
if (window.WebSocket) {
socket = new WebSocket("ws://localhost:8080/ws");
socket.onmessage = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + '\n' + event.data
};
socket.onopen = function (event) {
var ta = document.getElementById('responseText');
ta.value = "connection!";
};
socket.onclose = function (event) {
var ta = document.getElementById('responseText');
ta.value = ta.value + "connection close";
};
} else {
alert("你的浏览器不支持 WebSocket！");
}
function send(message) {
if (!window.WebSocket) {
return;
}
if (socket.readyState == WebSocket.OPEN) {
socket.send(message);
} else {
alert("connection fail.");
}
}
</script>
<form onsubmit="return false;">
<h3>WebSocket Chat room：</h3>
<textarea id="responseText" style="width: 500px; height: 300px;"></textarea>
<br>
<input type="text" name="message" style="width: 300px" value="Welcome">
<input type="button" value="Send" onclick="send(this.form.message.value)">
<input type="button" onclick="javascript:document.getElementById('responseText').value=''"
value="Clean">
</form>
<br>
</body>
</html>
4. 伺服器端啟動service.js
客戶端透過瀏覽器開啟client.html即可對話
sudo kill $(ps aux | grep 'app.js' | awk '{print $2}')
sudo node service.js &
2019年12月3日 星期二
2019年10月31日 星期四
DotNet Core API sample by GitHub
久不用就會忘記，透過Visual Studio 的WEBAPI範例來搭配GitHub配合看版當個小型的敏捷開發的範本。
1. 下載Git by windows
進入官網 http://git-scm.com/
進入官網 http://git-scm.com/
2. 建立看版做派工追蹤
3. 使用 Git Bash 建立專案
cd c:\git\
git init
git add -f --all
git commit
git push
DotNet:
1. 連結Git
2. 取得DotNet Core 3.0
使用Vistual Studio Install 的更新取得。
3. 建立API專案 Code Sample
4. 透過team Explorer 做 commit & push
2019年10月2日 星期三
2019年9月17日 星期二
AWS EFS+EC2(AutoScaling+LoadBalance) 備忘
如標題其實在AWS使用Elastic Beanstalk就含有這些，而且還有其他不可忽視的優點，不過作為一位All in One的工程師，這些優點反而就有些礙手礙腳，尤其是處在那些天馬行空的需求上，真能專注在Code內且功能單純的專案，難啊...其實這些應該給專業的MIS去處理而不是找工程師去代理!!
EFS可擴展的共用檔案儲存服務，建立服務要注意的地方是:
1. 可用區域，選擇EC2會使用的區網網段
2. 安全群組，選擇相關的安全群組(最好是EC2使用的)，另外ALL TCP Port須開放相關"可用區域"的區網網段，以便NFS協定運行。
3. DNS名稱是拿來連線用的，不同的檔案系統AWS會配給不同的DNS名稱。
sudo mount -t nfs4 -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2 DNS名稱:/ /掛載使用的資料夾
LoadBalance創建服務注意地方，唯一有卡關的在於ssl的CA憑證及PK密鑰的套用，這部分貼對位置就沒問題；另外可用區域的區網選擇也需搭配相關EC2使用的。
Auto Scaling根據設定自動對其進行擴展和縮減，建立服務要注意的地方是:
1. 創建使用的AMI檔，應已包含掛載EFS以便程式檔案更新時使用。當然AWS推薦的是CodeDeploy去處理；若干部落格推薦AMI手動更新，這些也是能考慮的...不在此篇討論。
※User Data記得加上...實測若沒有加上mount指令，則新的VM不會自動掛載~即便是原製作AMI的環境已掛載好的情況下。
#!/bin/bash
sudo mount -t nfs4 -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2 DNS名稱:/ /掛載使用的資料夾
※User Data記得加上...實測若沒有加上mount指令，則新的VM不會自動掛載~即便是原製作AMI的環境已掛載好的情況下。
#!/bin/bash
sudo mount -t nfs4 -o nfsvers=4.1,rsize=1048576,wsize=1048576,hard,timeo=600,retrans=2 DNS名稱:/ /掛載使用的資料夾
2. 安全群組不要新建使用EFS相同的即可。
3. 增減條件與數量這部分依照實際需要去調整，目前使用的是CPU使用率超過60% 300秒就增加一台，最高增加到3台。
4. 另外要搭配LoadBalance分散風險，所以建立兩個AutoScaling Group關連到同一個LoadBalance。
後記: 就不截圖了AWS的文件還蠻多的且更新頻率高，有搭配相關超連結到時候需要再點選進去看即可。
2019年9月11日 星期三
網頁浮動式固定選單_CSS+JS
RWD風行，所以網站的前端要考慮的層面就多了很多，前端目前缺乏所以得自己來，浮動式固定選單挺常用到，備忘囉!!
CSS
<style>
.navFixed {
z-index: 10;
position: fixed;
top: 0;
left: 0;
margin-top: 0;
min-width: 100%;
opacity: 0.94;
transition: opacity .5s ease-out;
}
</style>
JS
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 495) { /* 要滑動到選單的距離 */
$('.dropdowns').addClass('navFixed'); /* 幫選單加上固定效果 */
} else {
$('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
}
});
});
</script>
HTML
<div class="navFixed" ></div>
參考來源: https://edwardzou.blogspot.com/2017/09/fixMenu.html
CSS
<style>
.navFixed {
z-index: 10;
position: fixed;
top: 0;
left: 0;
margin-top: 0;
min-width: 100%;
opacity: 0.94;
transition: opacity .5s ease-out;
}
</style>
JS
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 495) { /* 要滑動到選單的距離 */
$('.dropdowns').addClass('navFixed'); /* 幫選單加上固定效果 */
} else {
$('.dropdowns').removeClass('navFixed'); /* 移除選單固定效果 */
}
});
});
</script>
HTML
<div class="navFixed" ></div>
參考來源: https://edwardzou.blogspot.com/2017/09/fixMenu.html
訂閱：
文章 (Atom)