WebSocket+Express讓前後端一家親

因為不想廢話,這裡就不解釋什麼是WebSocket了XD,進入正題

這裡直接使用Github上的websockets/ws項目,它直接使用了express做為項目,所以我們也一起跟著用吧XD

連結在這 https://github.com/websockets/ws

這裡我只寫我做的結果,所有的內容會放到github上,也會給上連接

Server的code

const wss = new WebSocket.Server({
port: WSS_PORT
});

wss.on('connection', function connection(ws) {
ws.on('message', function incoming(message) {
console.log('client send: %s', message)
});
setInterval(() => {
var uuid = uuidv4()
ws.send(uuid);
console.log('server send: %s', uuid)
}, 1000)
});

假裝Server有一直在傳輸信息所以使用setInterval 代替 


Client的code


<body onload="onload()">

<h1>Hello WebSockets</h1>

</body>

<style>
body {
background-color: lightblue;
overflow: auto;
}
</style>

<script>
function onload() {

let ws = new WebSocket('ws://localhost:8080')
ws.onopen = () => {
console.log('open connection')
}
ws.onclose = () => {
console.log('close connection')
}
ws.onmessage = event => {
console.log('client收到server信息')
console.log(event.data)
var msg = document.createElement('div')
msg.innerHTML = event.data;
document.querySelector('body').append(msg);
msg.focus();

}

}
</script>

執行server.js查看效果

Server console

Client page

Client console

完整的項目在這

https://github.com/cn27529/express-ws

收工


參考自

https://letswrite.tw/websocket/

https://medium.com/enjoy-life-enjoy-coding/javaScript-websocket-讓前後端沒有距離


graylog-docker安装

1.安装docker jdk1.8

2.下载docker镜像


docker pull mongo

docker pull docker.elastic.co/elasticsearch/elasticsearch-oss:6.8.5

docker pull graylog/graylog:3.1


3.分开启动3个组件(推荐)

# mongodb


docker run \

--name mongo \

-p 27017:27017 \

-v /etc/localtime:/etc/localtime:ro \

-v mongo_data:/data/db \

-d mongo:latest


# elasticsearch


docker run \

--name elasticsearch \

-p 9200:9200 -p 9300:9300 \

-e "http.host=0.0.0.0" \

-e "ES_JAVA_OPTS=-Xms512m -Xmx512m" \

-e "discovery.type=single-node" \

-e http.cors.allow-origin="*" \ (设置跨域)

-e http.cors.enabled=true \

-v /etc/localtime:/etc/localtime:ro \

-v es_data:/usr/share/elasticsearch/data \

-d docker.elastic.co/elasticsearch/elasticsearch-oss:6.8.5


# graylog


docker run \

--link mongo \

--link elasticsearch \

--name graylog \

-p 9000:9000 \

-p 12201:12201 -p 12201:12201/udp \

-p 1514:1514 -p 1514:1514/udp -p 5044:5044 \

-e GRAYLOG_HTTP_EXTERNAL_URI=http://{改成你的主機IP}:9000/ \

-e GRAYLOG_ROOT_TIMEZONE=Asia/Shanghai \

-e GRAYLOG_WEB_ENDPOINT_URI="http://{改成你的主機IP}:9000/:9000/api" \

-e GRAYLOG_PASSWORD_SECRET=somepasswordpepper \

-e GRAYLOG_ROOT_PASSWORD_SHA2=8c6976e5b5410415bde908bd4dee15dfb167a9c873fc4bb8a81f6f2ab448a918 \

-v /etc/localtime:/etc/localtime:ro \

-v graylog_journal:/usr/share/graylog/data/journal \

-d graylog/graylog:3.1


gist

Ubuntu 18.04 開機自動執行 指令 rc.local

1.sudo su 切換到root權限
2.以root身分, 進入lib/systemd/system/ 查看是否有rc.local.service檔案, 一般都會有啦XD
若沒有就走2-1
2-1.nano lib/systemd/system/rc.local.service
文件最後加上
[Install]
WantedBy=multi-user.target
Alias=rc.local.service

存檔
3.建立 rc.local 檔
cd /etc
sudo touch rc.local

nano rc.local
文件內容如下
#!/bin/sh -e
#
# rc.local
#
# This script is executed at the end of each multiuser runlevel.
# Make sure that the script will “exit 0” on success or any other
# value on error.
#
# In order to enable or disable this script just change the execution
# bits.
#
# By default this script does nothing.

#每次啟動自動執行Glances 命令列系統監控工具
glances -w

exit 0



4.rc.local 變更執行權限
sudo chmod +R 777 /etc/rc.local

5.啟用服務
sudo systemctl enable rc-local.service

6.重開機如果有自動glances -w就是成功囉!

參考

vscode-Bracket Pair Colorizer-有了彩色括號不再眼花惹

code多了會對很多的括號們也一定會眼花, 今天在這不是要賣你藥吃, 吃了會一目十行百行, 因為你不是神童, 今天要來說一款好用Bracket Pair Colorizer外掛套件, 不廢言, 來吧.



雖然星星數不多, 反正好用就好了XD


如果你的NB或PC效能比較慢, 你會發現這個效果不會主立馬出現, 所以看你嘍XD



收工!



好用的線上產生HTML碼的彩色的程式碼-hilite.me, 幹好繞口

自己打完標題都覺的不好念XD, 算了...沒差啦
這個還不錯用, 也不用再你的blog加一些有的沒的外掛, 掛久了你也都不記的到底你掛了哪些套件了, 真的是這樣子XD...

BJ4了

http://hilite.me/

EJS常用標簽

常用EJS標簽XD

<% %>流程控制標簽
//例
<% var user.name = 'bruce - huang' %>
<% if(user.name !== null) { %>
<div>hi <%= user.name %></div>
<% } else { %>
<div>no user name</div>
<% } %>

<%= %>输出標簽(原文输出HTML標簽)
//例
<% var user.name = 'bruce - huang' %>
<%= user.name %>

<%- %>输出標簽(HTML会被浏览器解析)
//例
<%- data.htmlContent %>


<%# %>注释標簽
//例
<%# 我是注解,我不會被秀在源始碼上 %>

-%>去掉沒用的空格
//例
<% var user.name = 'bruce - huang 看己去試吧, 我是不知道他怎知道什麼叫沒用的空格XD' %>
<%= user.name -%>

ejs中的邏輯代碼全部用JavaScript

好了, 收工!!

pm2, App name

官方文件是長這樣

pm2 start app.js           # Start app.js

pm2 start app.js -- -a 23  # Pass arguments '-a 23' argument to app.js script

pm2 start app.js --name serverone # Start a process and name it as serverone
                                    # you can now stop the process by doing
                                    # pm2 stop serverone
別名其實是很方便的東西...

按官方指示, 在實際上使用時, 你會發現....


參數搭配別名時會變成這樣..

原來是....別名在前, 參數在後

完工

node-telegram-bot-api, 建立你的telegram機器人

登入telegram-web or telegram app 後選

填入@botFather, 進行尋找

對, 就是它, telegram bot 的爸爸XD, 將它加入
@botFather加入後你會發現這個對話框

對, 沒錯, 它告訴你使用/newbot來建立你的機器人, 如下

好了, 我的cn27529bot機器人己有了XD

接下來, 跟它talk講話吧~在講話的前提下, 需要建立跟它溝通的API管道, 我們用nodejs來進行

先安裝要用的套件

裝好後, 建立一個bot.js, 然後填入

// 建立一個 Bot
var TelegramBot = require('node-telegram-bot-api');

const token = '這是你的機器人token';
const bot = new TelegramBot(token, { polling: true });

bot.onText(/\/start/, message => {

console.log(message); // for debug
const chatId = message.chat.id;
bot.sendMessage(chatId, 'Hello World');

});

bot.onText(/\/吃飯飯/, message => {

console.log(message); // for debug
const chatId = message.chat.id;
bot.sendMessage(chatId, '去你的飯飯');

});

然後啟動node bot.js, 然後回到telegram web 或 telegram app對話框中, 填入/start與/吃飯飯

看, 我跟我的機器人, 開始對話了XD

所有對話過程都會在console中列出


收工

https://telegram.me/cn27529bot