99-Line Swift completes markdown online editing server

This project shows how to build an online websocket text editor using the Perfect HTTP server, the Perfect markdown rendering component, and the Perfect markdown. All source code can be downloaded directly from Https://github.com/PerfectExamples/Perfect-Markdown-Editor

Make sure that your system has the SWIFT 3.1 toolchain installed.

Full instructional Video

For a complete tutorial on this case, please refer here: 99 lines Swift complete markdown online editing server

Get started quickly

Please use the following bash commands to download, compile, and run this project:

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

If the operation succeeds, the terminal displays:

[INFO]StartingHTTPserverlocalhoston 0.0.0.0:7777

This means that the server has started successfully, and now you can use your browser to view the address http://localhost:7777 as shown in:

As a teaching program, the use of the HTML without any additional page effects and colors to simplify the code to the most understandable degree. Of course you can add your favorite CSS themes to the source program at any time.

Introduction to Source code

This project is completed on the basis of perfecttemplate. If you are not yet familiar with how to write server applications using Swift, first look at this project.

Package.swift

That is, the SPM Package Manager when compiling the Project Standard source program, the core code is as follows:

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

In the above dependencies, Perfect-httpserver includes all the necessary features to launch a swift language to develop an HTTP server on Mac/linux, while Perfect-markdown Used in the swift language to convert markdown strings to HTML text. The last Perfect-websocket is for the server to support Html5/websocket extensions.

Main.swift

main.swiftIs the portal of the server and is a typical perfecttemplate template program. The server only provides two routing resources:

• /editor-WebSocket processor that is capable of processing WebSocket requests from the browser side:

 Public classEditorhandler:websocketsessionhandler { Public  LetSocketprotocol:string? ="Editor"  //If the window is closed and other events occur, the socket needs to be closed   PublicFunchandlesession(Request:httprequest, Socket:websocket) {socket.readstringmessage {input, _, _inchGuard Letinput = inputElse{Socket.close ()return}//end Guard      //In this line of code, convert the input markdown content to HTML       LetOutput = input.markdowntohtml??""        //Return the converted HTML text to the clientSocket.sendstringmessage (string: Output, Final:true) {self.handlesession (Request:request, Socket:socket)}//end Send}//end readstringmessage}//end handlesession}//end Handler

• /-Root route, which is a static HTML home page. But the behavior of the client-entering any Markdown content can immediately see the HTML rendering effect-is controlled by a small piece of WebSocket script embedded in the home page.

`varinput, output; function init(){input = document.getElementById (' TextInput '); Output = document.getElementById (' Results ');//This is a phrase to create a websocket, and target the current server with the/editor Routing and editor Protocol (which happens to have duplicate names)Sock =NewWebSocket (' ws://'+ Window.location.host +'/editor ',' editor '); Sock.onmessage = function(evt) {Output.innertext = Evt.data; }}//end Init function send() {Sock.send (Input.value);}

Finally, configure and start the server:

Just fill in the server name, port, and the above two route handles letConfiguration= ["Servers": [["Name":"localhost","Port":PORT,"Routes":[                ["Method":"Get","uri":"/","Handler": Handler], ["Method":"Get","uri":"/\ (API)","Handler": Sockethandler]]]]]//End ConfigurationTry Httpserver.launch (configurationdata:Configuration)

More information

For more information on this project, please refer to perfect.org.

Sweep Perfect Official website number

99-Line Swift completes markdown online editing server