基於C#的簡單http伺服器，用於多臺工控機資料的監控
阿新 • • 發佈：2019-01-26
最近工作在公司有這麼一個需求：在公司車間有多臺電腦執行著視覺檢測程式，我們在辦公室的時候需要清楚車間程式的執行狀態（比如NG率等等）。
需求分析：多臺電腦的資料上傳到一臺電腦，那麼需要一臺伺服器，上傳的資料可以被多個人看到，最好是以網頁的形式，誰都可以訪問。這個貌似涉及到伺服器(後臺)、網站(前端)，雖然自己平時的工作也算是大雜燴，但是涉及面比較廣，還是挺有難度的。
最後得出的方案：在辦公室使用一臺電腦作為伺服器，車間電腦使用http協議上傳資料到伺服器。然後再寫一個簡單的網頁，訪問伺服器，返回JSON資料，顯示出來。這個網站架設在伺服器電腦上，使用Windows自帶的IIS。
（一）、IIS設定
進入【控制面板】-【程式】，選中《開啟或關閉Windows功能》
開啟之後，選中其中兩項（紅色方框）
點選確定之後，等待幾分鐘，在C盤目錄下生成inetpub資料夾，點選進去，有5個資料夾
等下寫好的html檔案就放在 wwwroot資料夾下，這時候可以在瀏覽器中輸入自己的IP（或者localhost）來訪問,，比如直接輸入109.17.86.100回車即可出現網頁
注意：第一步我們把網站架設好了，網站內容待會解釋哈。
（二）伺服器
http伺服器可以使用Java編寫，但是Windows下.NET平臺編寫很方便
http伺服器作用：儲存上傳的資料，提供網站訪問(我監聽了2個埠)
直接貼程式碼：
介面效果<span style="font-size:14px;">using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.Net; using System.Net.Sockets; using System.IO; using System.Threading; namespace Vision_Server { public partial class Form1 : Form { String[] NGString=new String[39]; String[] FailString = new String[39]; String[] TimeString = new String[39]; Thread uploadThread; Thread downloadThread; public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { for (int i = 0; i < 39; i++) { NGString[i] = "*"; FailString[i] = "*"; TimeString[i] = "*"; } for (int i = 1; i < 40; i++) { dataGridView_AAM.Rows.Add(i.ToString() + "#", "*", "*", "*", "*"); } //上傳資料服務 uploadThread = new Thread(new ThreadStart(uploadPro)); uploadThread.Start(); //下載資料服務 downloadThread = new Thread(new ThreadStart(downloadPro)); downloadThread.Start(); } private void uploadPro() { using (HttpListener listerner = new HttpListener()) { listerner.AuthenticationSchemes = AuthenticationSchemes.Anonymous;//指定身份驗證 Anonymous匿名訪問 listerner.Prefixes.Add("http://109.17.86.92:8080/server/"); listerner.Start(); while (true) { //等待請求連線 //沒有請求則GetContext處於阻塞狀態 HttpListenerContext ctx = listerner.GetContext(); ctx.Response.StatusCode = 200;//設定返回給客服端http狀態程式碼 try { string pro = ctx.Request.QueryString["pro"]; string line = ctx.Request.QueryString["line"]; string NG = ctx.Request.QueryString["NG"]; string fail = ctx.Request.QueryString["fail"]; printLog(" pro=" + pro + " line=" + line + " NG=" + NG + " Fail=" + fail); if (pro == "AAM") { int lineIndex = int.Parse(line) - 1; dataGridView_AAM.Rows[lineIndex].Cells[1].Value = NG; dataGridView_AAM.Rows[lineIndex].Cells[2].Value = fail; dataGridView_AAM.Rows[lineIndex].Cells[3].Value = DateTime.Now.ToString(); NGString[lineIndex] = NG; FailString[lineIndex] = fail; TimeString[lineIndex] = DateTime.Now.ToString(); } //使用Writer輸出http響應程式碼 using (StreamWriter writer = new StreamWriter(ctx.Response.OutputStream)) { writer.WriteLine("OK"); //writer.Close(); // ctx.Response.Close(); } } catch (Exception ex) { printLog(ex.Message); } } listerner.Stop(); } } private void downloadPro() { using (HttpListener listerner = new HttpListener()) { listerner.AuthenticationSchemes = AuthenticationSchemes.Anonymous;//指定身份驗證 Anonymous匿名訪問 listerner.Prefixes.Add("http://109.17.86.92:8888/web/"); listerner.Start(); while (true) { //等待請求連線 //沒有請求則GetContext處於阻塞狀態 HttpListenerContext ctx = listerner.GetContext(); ctx.Response.StatusCode = 200;//設定返回給客服端http狀態程式碼 try { int locationY = int.Parse(ctx.Request.QueryString["locationY"]); //使用Writer輸出http響應程式碼 using (StreamWriter writer = new StreamWriter(ctx.Response.OutputStream)) { String retString = ""; //返回AAM資料json retString += "{"; retString += addMarks("AAM") + ":"; retString += "["; for (int i = 1; i < 40; i++) { retString += "{"; retString += addMarks("line") + ":" + addMarks(i.ToString()) + ","; retString += addMarks("pro") + ":" + addMarks("AAM") + ","; retString += addMarks("NG") + ":" + addMarks(NGString[i - 1]) + ","; retString += addMarks("fail") + ":" + addMarks(FailString[i - 1]) + ","; retString += addMarks("time") + ":" + addMarks(TimeString[i - 1]); retString += "}"; if (i != 39) retString += ","; } retString += "]"; retString += ","; retString += addMarks("locationY") + ":" + addMarks(locationY.ToString()); retString += "}"; writer.WriteLine(retString); writer.Close(); ctx.Response.Close(); } } catch(Exception ex) { printLog(ex.Message); } } listerner.Stop(); } } private String addMarks(String s) { return "\"" + s + "\""; } private void printLog(String str) { CheckForIllegalCrossThreadCalls = false; if (textBox_log.Lines.Length > 30) { textBox_log.Text = ""; } String time = DateTime.Now.ToShortTimeString(); textBox_log.Text += time+">" + str + "\r\n"; } private void button_exit_Click(object sender, EventArgs e) { uploadThread.Abort(); downloadThread.Abort(); Application.Exit(); } } }</span><span style="font-weight: bold; font-size: 24px;"> </span>
（三）、web站點
上面的伺服器介面只有一臺電腦可以顯示，為了可以一網頁的形式共享，編寫一個網頁
網頁定時重新整理，拉去資料到表格中顯示
上程式碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Vision監控</title>
<style type="text/css">
.go_no {
background-color: #FF3;
}
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
left: 526px;
top: 91px;
}
.mytitle {
color: #0F0;
}
#AAMTable {
color: #00F;
}
</style></head>
<center>
<body>
<p><strong class="mytitle">AAM 複合化程式監控(自動重新整理)</strong></p>
<table id="AAMTable" border="1">
<tr>
<th width="50" align="center" scope="col">line</th>
<th width="100" align="center" scope="col">GO-NO</th>
<th width="50" align="center" scope="col">Fail</th>
<th width="150" align="center" scope="col">time</th>
</tr>
<tr>
<td align="center">1#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">2#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">3#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">4#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">5#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">6#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">7#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">8#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">9#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">10#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">11#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">12#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">13#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">14#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">15#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">16#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">17#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">18#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">19#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">20#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">21#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">22#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">23#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">24#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">25#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">26#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">27#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">28#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">29#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">30#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">31#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">32#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">33#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">34#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">35#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">36#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">37#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">38#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
<tr>
<td align="center">39#</td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
<td align="center" id="AAMTable"> </td>
</tr>
</table>
<p> </p>
</body>
</center>
</html>
<script type=text/javascript>
var locationY=50;
function timedGetText(){
locationY=document.getElementById("AAMTable").offsetTop;
var url="http://109.17.86.92:8888/web/?locationY=" + locationY; //伺服器地址
var time=400;
var request = new XMLHttpRequest();
var timeout = false;
//訪問限時，限時長為200ms
var timer = setTimeout( function(){
timeout = true;
request.abort();
}, time );
request.open( "GET", url );
request.onreadystatechange = function(){
if( request.readyState !== 4 ) return;
if( timeout ) return;
clearTimeout( timer );
if( request.status === 200 ){
//資料返回成功
var obj =JSON.parse(request.responseText ); //將JSON字串轉換成JSON物件
for(var i=0;i<39;i++)
{
var fail=obj.AAM[i].fail;
var NG=obj.AAM[i].NG;
var time=obj.AAM[i].time;
//表格操作
document.getElementById("AAMTable").rows[i+1].cells[1].innerHTML=NG;
document.getElementById("AAMTable").rows[i+1].cells[2].innerHTML=fail;
document.getElementById("AAMTable").rows[i+1].cells[3].innerHTML=time;
}
var retlocationY=obj.locationY;
window.scrollBy(0,retlocationY);
}
}
request.send( null );
}
timedGetText();
function myrefresh()
{ //重新整理頁面
window.location.reload();
}
setInterval('myrefresh()',2000); //定時重新整理頁面，2s一次
</script>
網頁效果：
