99行Swift完成Markdown線上編輯服務器

標籤：建立   ges   運行   sel   效果   addclass   assets   com   ack   

本項目展示了如何使用Perfect HTTP伺服器、Perfect Markdown渲染組件和Perfect WebSocket搭建一個線上的Markdown文字編輯器。全部原始碼可以在https://github.com/PerfectExamples/Perfect-Markdown-Editor直接下載

請確保您的系統已經安裝了Swift 3.1工具鏈。

完整教學視頻

關於本案例完整的教學視頻請參考這裡：99行Swift完成Markdown線上編輯服務器

快速上手

請使用下列bash命令下載、編譯和運行本項目：

$ git clone https://github.com/PerfectExamples/Perfect-Markdown-Editor.git$ cd Perfect-Markdown-Editor$ swift build$ ./.build/debug/PerfectMarkdownEditor

如果運行成功，則終端會顯示：

[INFO] Starting HTTP server localhost on 0.0.0.0:7777

這意味著伺服器已經成功啟動，現在您可以使用瀏覽器查看地址http://localhost:7777，如所示：

作為教學程式，這裡採用了沒有任何附加頁面特效和色彩的素顏HTML，以將代碼簡化到最為容易理解的程度。當然您可以隨時將喜愛的CSS主題加入到來源程式。

原始碼簡介

本項目是在 PerfectTemplate 基礎上編製完成的。如果您還不熟悉如何使用Swift編寫伺服器應用程式，請首先查看這個項目。

Package.swift

即SPM軟體包管理器在編譯項目時標準的來源程式，核心代碼如下：

    .Package(url: "https://github.com/PerfectlySoft/Perfect-HTTPServer.git", majorVersion: 2),    .Package(url: "https://github.com/PerfectlySoft/Perfect-WebSockets.git", majorVersion:2),    .Package(url: "https://github.com/PerfectlySoft/Perfect-Markdown.git", majorVersion: 1)

上述依存關係中， Perfect-HTTPServer 包括了啟動一個Swift語言在 mac / linux 上開發HTTP伺服器的所有必要功能；而 Perfect-Markdown 用於Swift語言將Markdown字串轉換為HTML文本。最後的 Perfect-WebSocket 用於伺服器支援HTML5/WebSocket擴充。

main.swift

main.swift 是該伺服器的門戶入口，是一個典型的PerfectTemplate 模板程式。該伺服器只提供兩個路由資源：

• /editor - WebSocket 處理器，即能夠處理來自瀏覽器端的 WebSocket 請求：

public class EditorHandler: WebSocketSessionHandler {  public let socketProtocol : String? = "editor"  // 如果視窗關閉等事件發生則需要關閉socket  public func handleSession(request: HTTPRequest, socket: WebSocket) {    socket.readStringMessage { input, _, _ in      guard let input = input else {        socket.close()        return      }//end guard      // 就這一行代碼，把輸入的Markdown內容轉換為HTML      let output = input.markdownToHTML ?? ""        // 將轉化好的HTML文本返回給用戶端      socket.sendStringMessage(string: output, final: true) {        self.handleSession(request: request, socket: socket)      }//end send    }//end readStringMessage  }//end handleSession}//end Handler

• / - 根路由，即一個靜態HTML首頁頁面。但是用戶端的行為 - 輸入任何Markdown內容都可以立刻看到HTML渲染效果 - 是由在該首頁中嵌入的一小段 WebSocket 指令碼控制的。

`var input, output;function init(){    input = document.getElementById(‘textInput‘);    output = document.getElementById(‘results‘);    //這一句話是建立WebSocket，並且將目標指向當前伺服器，採用/editor路由和editor協議（碰巧重名）    sock = new WebSocket(‘ws://‘ + window.location.host + ‘/editor‘, ‘editor‘);    sock.onmessage = function(evt) { output.innerText = evt.data; }}//end initfunction send() {    sock.send(input.value);}

最後，配置並啟動伺服器：

// 只需填寫伺服器名稱、連接埠，以及上述兩個路由控制代碼let configuration = [ "servers": [[ "name":"localhost", "port":PORT,            "routes":[                ["method":"get", "uri":"/", "handler":handler],        ["method":"get", "uri":"/\(API)", "handler":socketHandler]            ]]]]//end configuration    try HTTPServer.launch(configurationData: configuration)

更多資訊

關於本項目更多內容，請參考perfect.org.

掃一掃 Perfect 官網號

99行Swift完成Markdown線上編輯服務器