當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Github 开源项目（一）websocketd （实战：实时监控服务器内存信息）

發布時間：2025/4/5 编程问答 44 豆豆

生活随笔收集整理的這篇文章主要介紹了 Github 开源项目（一）websocketd （实战：实时监控服务器内存信息）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

官方地址：https://github.com/joewalnes/websocketd

　　websocketd是WebSocket守護進程，它負責處理WebSocket連接，啟動您的程序來處理WebSockets，并在程序和Web瀏覽器之間傳遞消息。

?一、安裝：websocketd?

wget https://github.com/joewalnes/websocketd/releases/download/v0.2.12/websocketd-0.2.12-linux_amd64.zipunzip websocketd-0.2.12-linux_amd64.zip

解壓后生成這個文件：websocketd

復制該文件到 /usr/bin目錄下，修改環境變量

sudo cp websocketd /usr/bin/websocketdsudo vim /etc/profileexport PATH=$PATH:/usr/bin/websocketd

可能出現的錯誤：如果修改了/etc/profile，那么編輯結束后執行source profile 或執行點命令 ./profile,PATH的值就會立即生效了，但是會提示以下錯誤：

#source /etc/profile 之后為什么會出現 command not found

解決辦法，直接切換到root 用戶模式既可，再次執行source profile 就可以了，輸入help 看是否配置合適，如下所示：

tinywan@tinywan:~/shell$ websocketd --help websocketd (0.2.12 (go1.6 linux-amd64) --)websocketd is a command line tool that will allow any executable program that accepts input on stdin and produces output on stdout to be turned into a WebSocket server.Usage:Export a single executable program a WebSocket server:websocketd [options] COMMAND [command args]Or, export an entire directory of executables as WebSocket endpoints:websocketd [options] --dir=SOMEDIROptions:--port=PORT HTTP port to listen on.--address=ADDRESS Address to bind to (multiple options allowed)Use square brackets to specify IPv6 address. Default: "" (all)

二、開啟WebSocketd 服務

測試代碼：count.sh

#!/bin/bash for ((COUNT = 1; COUNT <= 10; COUNT++)); doecho $COUNTsleep 1 done

運行腳本時你可能會遇到以下錯誤：

root@TinywanAliYun:/home/www/bin# websocketd --port=63800 ./count.sh Unable to locate specified COMMAND './count.sh' in OS path.Usage:Export a single executable program a WebSocket server:websocketd [options] COMMAND [command args]Or, export an entire directory of executables as WebSocket endpoints:websocketd [options] --dir=SOMEDIROr, show extended help message using:websocketd --help

請賦予權限，使其可執行：

$ chmod +x ./count.sh

隨便打開一個瀏覽器，在console中輸入一下代碼測試：

（1）測試結果如下所示：

（2）新建立一個客戶端測試client.html

<!doctype html> <html lang=""> <head><meta charset="utf-8"><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><meta http-equiv="x-ua-compatible" content="ie=edge"><title>websocketd</title> </head> <body> <h2>websocketd 客戶端的簡單測試</h2> <pre id="log"></pre> <script>// helper function: log message to screenfunction log(msg) {document.getElementById('log').textContent += msg + '\n';}// setup websocket with callbacksvar ws = new WebSocket('ws://192.168.18.12:8080/');ws.onopen = function() {console.log('CONNECT');};ws.onclose = function() {console.log('DISCONNECT');};ws.onmessage = function(event) {console.log('MESSAGE: ' + event.data);}; </script> </body> </html>

在查看結果信息，查看結果已經ok

?查看服務端信息

我本機IP地址為，也就是client.html客戶端

?websocketd --port=9501 --devconsole luajit ./json_ws.lua

》》》實際案例，使用WebSocketd 實時監控內存信息

1、編寫腳本，system_info_send_websocketd.sh

#!/bin/bash PATH=/usr/local/bin:/usr/bin:/binSHELL_DIR="/home/www/bin" SHELL_NAME="system_info_websocketd" SHELL_TIME=$(date '+%Y-%m-%d') SHELL_LOG="${SHELL_DIR}/${SHELL_NAME}-${SHELL_TIME}.log"REDIS_MEMORY_KEYS_NAME="REDIS_MEMORY_INFO:001" REDIS_DISH_KEYS_NAME="REDIS_DISH_INFO:001"while(true)doFIND_DATA=$(cat /proc/meminfo | grep "MemFree:" | awk '{print $2}')echo "[$SHELL_TIME]: FIND_DATA = $FIND_DATA INSERT_RES = ${INSERT_RES} CUT_LIST_LEN = ${CUT_LIST_LEN}" >> $SHELL_LOGecho '{"data":'"${FIND_DATA}"',"errcode":0,"errmsg":0}'sleep 2 done

2、客戶端實時監控代碼：

<div class="panel-footer" id="container" style="width: 100%; height: 400px; margin: 0 auto"></div> <script language="JavaScript">//數據獲取var moniServerIp = "{{moniServerIp}}";var moniServerSshUsername = "{$moniServerSshUsername}";var moniServerSshPassword = "{$moniServerSshPassword}";var wsServerIP = "127.0.0.1";var wsServerPort = "12380";var moniMehtod = "server02";var moniInterval = 1;var moniDataUnit = 'MB';var wsData = 0.0;wsSend = {"action": moniMehtod,"name": "tinywan",};$(document).ready(function () {//----------WebSocket部分--------------var ws = new WebSocket("ws://" + wsServerIP + ":" + wsServerPort);ws.onopen = function () {ws.send(JSON.stringify(wsSend));};ws.onclose = function () {console.log('鏈接已斷開');ws.close();};ws.onmessage = function (e) {var response = JSON.parse(e.data);if (Number(response.errcode) !== 0) {console.log(String(response.errmsg));ws.close();alert('出錯啦!' + String(response.errmsg));return;}var divisor = 1;switch (moniDataUnit.toLocaleLowerCase()) {case 'mb':divisor = 1024;break;}wsData = response.data / divisor;console.log("收到服務端的消息：" + wsData);};//----------highcharts的圖標插件部分--------------Highcharts.setOptions({global: {useUTC: false}});$('#container').highcharts({chart: {type: 'spline',animation: Highcharts.svg, // don't animate in old IEmarginRight: 10,events: {load: function () {// set up the updating of the chart each secondvar series = this.series[0];setInterval(function () {// current timevar x = (new Date()).getTime(),y = wsData * 1.00;series.addPoint([x, y], true, true);}, 2000);}}},title: {text: '服務器【' + moniServerIp + '】內存指標(單位:' + moniDataUnit + ')'},xAxis: {type: 'datetime',tickPixelInterval: 150},yAxis: {title: {text: 'MemFree'},plotLines: [{value: 0,width: 1,color: '#808080'}]},tooltip: {formatter: function () {return '<b>' + this.series.name + '</b><br/>' +Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +Highcharts.numberFormat(this.y, 2);}},legend: {enabled: false},exporting: {enabled: false},series: [{name: 'MemFree指標',data: (function () {// generate an arrayvar data = [],time = (new Date()).getTime(),i;for (i = -19; i <= 0; i += 1) {data.push({x: time + i * 1000,y: wsData});}return data;}())}]});}); </script> <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script src="http://code.highcharts.com/highcharts.js"></script>

3、測試結果：

4、客戶端可能會出現超時鏈接的，可以使用?ReconnectingWebSocket

var ws = new ReconnectingWebSocket("ws://" + wsServerIP + ":" + wsServerPort);

?》》》》》》》》》》》》參數詳解 ? ? ? ? ? ? ? ? ??

（1）參數一：--staticdir=.

--staticdir=. Allow websocketd to serve count.html as a static file //允許websocketd作為靜態文件提供count.html

這個參數是什么意思來，就是在當前項目指定通知執行的語言腳本文件(count.sh)同名的count.html作為靜態文件，直接使用http訪問

當前目錄

count.sh 文件（tinywan@tinywan:~/Go/websocket$ cat count.sh）

#!/bin/bash # Count from 1 to 10, pausing for a second between each iteration. for COUNT in $(seq 1 10); doecho $COUNTsleep 1 done

count.html 文件

<!DOCTYPE html> <html><head><title>websocketd count example</title><style>#count {font: bold 150px arial;margin: auto;padding: 10px;text-align: center;}</style></head><body><div id="count"></div><script>var ws = new WebSocket('ws://192.168.18.180:8080/');ws.onopen = function() {document.body.style.backgroundColor = '#cfc';};ws.onclose = function() {document.body.style.backgroundColor = null;};ws.onmessage = function(event) {document.getElementById('count').textContent = event.data;};</script></body> </html>

?打開谷歌瀏覽器，在地址欄輸入：http://192.168.18.180:8080/

點擊count.html后的效果圖

?（2）參數二：?--devconsole

　　該--devconsole標志使內置的控制臺websocketd與WebSocket端點手動交互。

　　指向瀏覽器http://localhost:8080/，您將看到控制臺。按復選框連接。

? ? ? 請注意，您不能同時使用--devconsole和--staticdir。開發控制臺旨在提供臨時用戶界面，直到您構建了真實的用戶界面。

開始測試：

打開瀏覽器測試，發送一個空數據是沒辦法發送的，由于我們沒有指定開啟那個一個語言腳本文件充當WebSocket 服務器，為我們提供客戶端的服務

指定/home/tinywan/Go/websocket?目錄下的 count.sh 作為服務文件，繼續測試的結果如下所示

?Websocket 代理服務器

1、沒代理之前訪問

2、代理之后訪問

守護進程運行

nohup websocketd --port=63800 /home/www/bin/system_info_send_all_websocketd.sh >/dev/null 2>&1 &

?加載證書

sudo websocketd --port=6500 --ssl --sslcert="/etc/letsencrypt/live/www.tinywan.top/fullchain.pem" --sslkey="/etc/letsencrypt/live/www.tinywan.top//privkey.pem" /home/www/bin/system_info_send_all_websocketd.s

?wss 協議測試

貴在堅持,相信自己.