純靜態HTML 與 C# Server 進行WebSocket 鏈接

時間 2019-11-09

標籤靜態 html c# server 進行 websocket 鏈接欄目網站開發简体版

原文原文鏈接

TODO: 這篇文章只是寫了一個DEMO，告訴你如何使用C#構建一個WebSocket服務器，以便HTML網頁能夠經過WebSocket與之進行交互。
將會使用到的 Package：
websocket-sharp
Newtonsoft.JSONhtml

這個DEMO主要完成的工做是：web

HTML 鏈接 WebSocket 並傳送一個Json，Json包含兩個數字a和b。
服務器監聽 WebSocket 並解析Json裏面的兩個數字，將兩個數字加起來的和做爲結果以Json的形式傳送給HTML。
HTML 獲得返回之後更新顯示。
10秒以後，服務器主動向瀏覽器再發送一次消息。

補充說明：
普通的HTTP請求跟WebSocket請求有什麼不同呢？爲何咱們要用Websocket來鏈接？
我這裏寫的這個例子可能不是很好體現出Websocket的優點。
先說說它倆的不一樣。ajax

HTTP是由客戶端發起請求，服務器對請求進行處理以後作出相應的過程。
WebSocket跟Socket同樣，一旦創建鏈接，服務器能夠經過WebSocket主動向客戶端發送數據。

好比例子中，第一個例子是對客戶端上傳的數據進行了處理，處理結果進行了返回，同時也延遲10s，讓服務器端主動發送了一則消息。
雖然也能夠用循環ajax輪詢去實現相似服務器推送的效果，可是WebSocket會更省網絡資源~json

準備姿式

新建工程

首先須要準備兩個工程：瀏覽器

一個是Web項目，能夠是任何Web項目，由於咱們只用到HTML。HTML單文件也是沒有問題的。這裏我用的是vscode live server。
另外一個是C#命令行項目，固然也能夠不是命令行，只是以爲命令行比較方便，DEMO也不須要窗體，若是你須要窗體能夠使用WPF或者WinForms。

必要依賴

在C#項目中，咱們須要安裝Nuget包：WebSocketSharp （因爲這個Nuget包在寫文的時候仍是rc，因此須要勾選包括搶鮮版纔會搜索出來哦）和 Newtonsoft.JSON

服務器代碼

首先咱們須要新建一個類，做爲一個app，去處理傳送來的消息。服務器

using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using WebSocketSharp;
using WebSocketSharp.Server;

namespace WebSocketDemo
{
    class Add : WebSocketBehavior
    {
        protected override void OnOpen()
        {
            Console.WriteLine("Connection Open");
            base.OnOpen();
        }
        protected override void OnMessage(MessageEventArgs e)
        {
            var data = e.Data;
            if (TestJson(data))
            {
                var param = JToken.Parse(data);
                if (param["a"] != null && param["b"] != null)
                {
                    var a = param["a"].ToObject<int>();
                    var b = param["b"].ToObject<int>();
                    Send(JsonConvert.SerializeObject(new { code = 200, msg = "result is " + (a + b) }));
                    Task.Factory.StartNew(() => {
                        Task.Delay(10000).Wait();
                        Send(JsonConvert.SerializeObject(new { code = 200, msg = "I just to tell you, the connection is different from http, i still alive and could send message to you." }));
                    });
                }
            }
            else
            {
                Send(JsonConvert.SerializeObject(new { code = 400, msg = "request is not a json string." }));
            }
        }

        protected override void OnClose(CloseEventArgs e)
        {
            Console.WriteLine("Connection Closed");
            base.OnClose(e);
        }

        protected override void OnError(ErrorEventArgs e)
        {
            Console.WriteLine("Error: " + e.Message);
            base.OnError(e);
        }

        private static bool TestJson(string json)
        {
            try
            {
                JToken.Parse(json);
                return true;
            }
            catch (JsonReaderException ex)
            {
                Console.WriteLine(ex);
                return false;
            }
        }
    }
}

上面這一段代碼中，重點在於OnMessage方法，這個方法就是處理消息的主要流程。websocket

在Main函數中，咱們加入下面的代碼。6690是此次Demo使用的端口號，第二行AddWebSocketService添加了一行路由，使得鏈接到ws://localhost:6690/add能夠導向咱們預約義好的App類中的處理邏輯。網絡

using System;
using WebSocketSharp.Server;

namespace WebSocketDemo
{
    class Program
    {
        static void Main(string[] args)
        {
            var wssv = new WebSocketServer(6690);
            wssv.AddWebSocketService<Add>("/add");
            wssv.Start();
            Console.WriteLine("Server starting, press any key to terminate the server.");
            Console.ReadKey(true);
            wssv.Stop();
        }
    }
}

客戶端代碼

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>WebSocket DEMO</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      ul,
      li {
        padding: 0;
        margin: 0;
        list-style: none;
      }
    </style>
  </head>
  <body>
    <div>
      a:<input type="text" id="inpA" /> b:<input type="text" id="inpB" />
      <button type="button" id="btnSub">submit</button>
    </div>
    <ul id="outCnt"></ul>
    <script>
      let wsc;
      var echo = function(text) {
        var echoone = function(text) {
          var dom = document.createElement("li");
          var t = document.createTextNode(text);
          dom.appendChild(t);
          var cnt = document.getElementById("outCnt");
          cnt.appendChild(dom);
        };
        if (Array.isArray(text)) {
          text.map(function(t) {
            echoone(t);
          });
        } else {
          echoone(text);
        }
      };
      (function() {
        if ("WebSocket" in window) {
          // init the websocket client
          wsc = new WebSocket("ws://localhost:6690/add");
          wsc.onopen = function() {
            echo("connected");
          };
          wsc.onclose = function() {
            echo("closed");
          };
          wsc.onmessage = function(e) {
            var data = JSON.parse(e.data);
            echo(data.msg || e.data);
            console.log(data.msg || e.data);
          };

          // define click event for submit button
          document.getElementById("btnSub").addEventListener('click', function() {
            var a = parseInt(document.getElementById("inpA").value);
            var b = parseInt(document.getElementById("inpB").value);
            if (wsc.readyState == 1) {
              wsc.send(JSON.stringify({ a: a, b: b }));
            } else {
              echo("service is not available");
            }
          });
        }
      })();
    </script>
  </body>
</html>

當建立WebSocket對象的時候，會自動進行鏈接，這個對象能夠用onopen,onclose,onmessage分別處理事件。主要通信的流程也是在onmessage中進行處理。app