99行Swift完成Markdown在线编辑服务器
本项目展示了如何使用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"// 如果窗口关闭等事件发生则需要关闭socketpublic func handleSession(request: HTTPRequest, socket: WebSocket) {socket.readStringMessage { input, _, _ inguard let input = input else {socket.close()return}//end guard// 就这一行代码,把输入的Markdown内容转换为HTMLlet 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 init
function 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 configurationtry HTTPServer.launch(configurationData: configuration)
更多信息
关于本项目更多内容,请参考perfect.org.
扫一扫 Perfect 官网微信号
99行Swift完成Markdown在线编辑服务器相关推荐
- Vue中使用mavonEditor插件实现markdown在线编辑
场景 若依前后端分离版手把手教你本地搭建环境并运行项目: 若依前后端分离版手把手教你本地搭建环境并运行项目_霸道流氓气质的博客-CSDN博客_若依前后端分离 在上面的基础上,怎样实现markdown在 ...
- markdown在线编辑工具,在线渲染,转换html
今天偶然看到一篇文章,讲的是一个开源的markdown渲染工具Markdeep,它能够将Markdown格式的文本渲染出来,并在网页上展示.另外,Markdeep还支持非markdown格式的纯文本渲 ...
- 永中office之在线编辑(java版)
永中office在线编辑基于永中WebOffice的文档在线编辑能力,通过此能力,用户可以在web端直接编辑office,并且还是实时保存的,为操作office提供了许多便利. 在线编辑是通过自己搭建 ...
- 多人同步在线编辑文档(onlyoffice)服务器部署-测试
我装的是社区服务器 + 文件服务器(这样才能实现多人在线同时编辑文件) 这个是我虚拟机的配置,onlyoffice 官网建议 官方网址 :https://helpcenter.onlyoffice.c ...
- 在线编辑word文档 可保存到服务器(转)
使用说明:该方法只在office xp 和 2003上 测试通过,2000及以下 版本没试. 注意:你要打开的服务器端的word文档要有写权限.iis要开起 web服务扩展中的webdav为允许 具体 ...
- 在线编辑excel文件实现服务器后台存储,及页面还原
excel实现在线编辑功能 1.需求描述 在我们正常的工作需求中会遇到需要我们实现在线便捷excel文档的时候,以前大家大部分是根据onlineoffice的免费api实现在线预览,也可以通过onli ...
- 多人同步在线编辑文档onlyoffice服务器部署
在网上找了好多文章,都没有搭建出来,就页面一直卡在那里加载,实际是因为少了东西,本文详细写出了搭建过程.在docker中实现 文章目录 系统要求 其他要求 安装Docker 启动容器的准备工作 安装 ...
- C# 10分钟入门基于WebOffice实现在线编辑文档,实时保存到服务器(所有office,兼容WPS)
今天,他来了(weboffice在线编辑文档). 上次写了一个在线预览的博,当然,效果并不是太理想,但是紧急解决了当时的问题. 后来,小编重新查找资料,求助大牛,终于使用新的方式替换了之前的low方法 ...
- 在线编辑Markdown数学公式(LaTex)网站链接
这是本人在网上冲浪时发现的一个非常好的Markdown数学公式在线编辑代码的网站链接,对于喜欢做Markdown笔记的我来说非常有用. Online LaTeX Equation Editor - c ...
- [转载]Office文档在线编辑的实现之二
上篇文章 http://www.cnblogs.com/jianyi0115/archive/2007/03/16/677712.html 讲述了如何通过iis的webdav支持实现客户端的offic ...
最新文章
- 安卓相对布局常用语句
- android中仿qq最新版抽屉,Android 自定义View实现抽屉效果
- CSS之Multi-columns的跨列
- 数据结构--队列Queue--循环顺序队列
- NS2相关学习——完成一个新协议(3)
- linux /dev
- Java中布尔值的定义_使用简单的布尔值作为自定义验证器
- The prefix p for attribute p:message associated with an element type bean
- Python中 将txt文件转换为csv文件
- 一文带你快速全面掌握Java反射机制面试题
- pr获取无字幕视频素材和常用素材的网站
- HTTPS网络流量分析方法简介
- 软件测试工程师要学习的基础知识,你知道多少?
- 【iOS】 app 的优化
- 8.1 有监督学习算法
- 二进制安全:ptmalloc内存管理机制与堆块chunk源码分析
- Arduino整型字符串互转
- 熬夜整理的C/C++万字总结(一)
- TRIZ系列-创新原理-34-抛弃和再生部件原理
- windows10在桌面上显示“我的电脑”
热门文章
- mac foxmail html签名,Foxmail怎么设置签名?Foxmail个性签名设置方法
- Prolog 语言入门教程(转)
- 微信小程序组件之picker-view
- 机器学习:AI数据集划分(训练集、验证集、测试集)
- 怎樣制作线段动画_20技巧教你如何简单制作动画
- MATLAB 内积外积混合积
- android连接服务器代码实例,Android客户端连接服务器端,向服务器端发送请求HttpURLConnection(示例代码)...
- 三年经验前端开发面试总结
- 电脑端几行代码完成微信多开
- 项目成本管理:成本与成本管理概念