玩一玩nodejs--一个简单的在线实时填表应用
学习nodejs三天,入了个门,感觉他和jsp、php还是存在较大的差别。本文首先复习这些天学的一些知识点,然后谈一下如何一步一步到做一个在线实时填表的小应用,进一步巩固一下这些个知识点。这里先简单介绍一下这个应用,班上经常要填一些电子统计表,要求每个人填对应的行,最后班长汇总出一个总表,这是非常麻烦的。这个应用就是要解决这样一个问题,每个人在浏览器填表中的对应的行,然后生成一个汇总的表,这个应用的核心模块是socket.io模块。(笔者水平有限,如有不当,请各位园友批评指正。)
一、知识点复习篇
1、构建一个web服务器
以前玩php和jsp时用过Apache、汤姆猫服务器,nodejs则有不同,他是需要自己createServer。
//server.js
var http = require('http'); http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/plain'});
res.end('so easy!');
}).listen(1111,'127.0.0.1'); console.log('server runing at 127.0.0.1:1111...');
在浏览器访问127.0.0.1:1111可以看到so easy!字样。
这里用到的时http模块到createServer方法,node的模块有三种,自有模块,npm模块,文件模块。自有模块直接用require,不带路径;npm模块先要npm install, 然后像自有模块那样引入;文件模块就是自己创建到模块,要带路径引入。
2、从请求对象中获取东西
上面到req是一个请求对象,包含了请求相关到信息,可以console.log出来看看,比较多,这里简单介绍。
(1)req.url
访问http://127.0.0.1:1111其值为/
访问http://127.0.0.1:1111/index/index.html?a=1#fd其值为/index/index.html?a=1(注意这里没有hash)
一般的,用url模块解析其路径,用querystring模块解析其查询参数,当然自己去分解字符串也是可以的。
3、作出响应
1中到res是http.ClientRequest 类的一个实例,他有很多方法。这里介绍两个。
(1)writeHead(status,{'key':value});这个方法用于写响应header头。
var http = require('http');
http.createServer(function(req,res){
res.writeHead(200,{'Content-Type':'text/html'});
res.end("<html><head><meta charset='utf-8'></head><body><h2>欢迎关注大~熊</h2></body></html>");
}).listen(1111,'127.0.0.1');
console.log('server runing at 127.0.0.1:1111...');
如果这样写,得到的响应的head中Content-Type就是text/html,响应数据作为html代码被解析。
(2)end()
上面到这个例子已经用到这个方法,作用是将数据写到响应报文的数据段。
4、读写文件
读写文件用到的时fs模块。
(1)读文件
fs.readFile(file[, options], callback):异步读文件,回调函数有两个参数,第一个错误信息,第二个是读到的数据。数据可能是一个buffer,也可能是一个字符串。取决于options中到encoding
fs.readFileSync(file[, options]):同步读文件,返回读到到数据
具体可以看看文档说明,关于同步和异步,大~熊理解不太深入,也经常因为这个犯错。同步是一种阻塞式的,必须读完了后边的事才可以做,异步非阻塞的,一件事没干完后边的事就可以做。
我在项目根目录下建了一个1.txt文件,内容为“欢迎关注大~熊”;
var fs = require('fs');
console.log(fs.readFileSync(__dirname+'/1.txt','utf8')); //指定了encoding
//欢迎关注大~熊
var fs = require('fs');
console.log(fs.readFileSync(__dirname+'/1.txt')); //没有指定encoding
//<Buffer e6 ac a2 e8 bf 8e e5 85 b3 e6 b3 a8 e5 a4 a7 ef bd 9e e7 86 8a>
异步方法是类似的
var fs = require('fs');
fs.readFile(__dirname+"/1.txt",'utf8',function(err,data){
console.log(data);
})
(2)写文件
fs.writeFile(file, data[, options], callback),异步api,data可以是buffer也可以时String
fs.writeFileSync(file, data[, options]),同步api
var fs = require('fs');
fs.writeFileSync(__dirname+'/1.txt','大熊真帅!','utf8');
可以看到文件内容变成了‘大熊真帅!“.
5、node-xlsx模块和socket.io模块
前者是帮助我们处理excel表的,请参看https://github.com/mgcrea/node-xlsx
后者时封装了实时通信的api,请参看https://github.com/socketio/socket.io
二、在线填表应用开发篇
1、完成效果

这里在录制gif时还存在一个问题,就是a用户修改某一行中,b用户中不会立即显示更改后的数据,现已经改正,原来的时单播事件,改成广播就好了。原计划将代码都贴出来分析分析,但是考虑到放一大段代码似乎不太好,所以将其放到了github上https://github.com/yibingxiong/onlinetable/ ,下面只简单讲一下思路,如果你需要看看源码可以clone,我的github目前没有star,如果你能成为第一个star,大~熊非常高兴。
2、基本思路
(1)用户初次链接时向服务器发送一个connectin事件,这个事件是调用io()方法自动发送给服务器的,无需主动调用,服务器接受到这个事件后读取excel文件,并用nodex-xlsx解析,然后调用自定义的一个changeStatus方法,这个方法时根据正在被修改的行的数组isOptRows(这个数组是所有用户共享的,存储正在被修改的行到行号)为每一行增加一个标识,0表示没人在修改,1表示有人在修改。处理完成后向客户端单播一个serverChange事件,同时携带处理后的数据,客户端根据这些数据渲染出表格,将状态为0的行置于可编辑状态,状态为1的行置于不可编辑状态。
(2)用户点击编辑时,向服务器发送一个enter事件,携带的数据为被编辑的行号。然后将该行数据变成编辑状态,就是变成文本框,按钮变成完成。服务器收到enter事件后,取得其中的行号,加入到isOptRows数组,然后广播一个事件broadcast,携带上行号,告知所有用户"这个行有人在编辑,你不要编辑了",客户端收到这个事件,将这一行变成不可编辑状态。
(3)用户点击完成后向服务器发送一个datachange事件,携带上修改后到新数据,同时将这一行变成正常状态。服务器收到datachange事件后,将对应行的数据更新,写回到文件。写完后发一个serverChange事件,携带上新的数据。同时从isOptRows中溢出完成修改的行的行号。
(4)思路总结一下,实现还是比较的简单,不过用这个例子还是可以学习下如何进行实时通信,socket.io其实就是在服务器和客户端建立了一个交流的通路。如果将服务器看作领导,客户端看作员工,可以理解为领导可向单个员工发出指令(单播),也可以开个员工大会,向所用员工发出指令(广播),反过来,员工也可以向领导反映情况。
三、谈谈入门nodejs的感受
javascript是个奇葩,nodejs更是一个奇葩。javascript里边可以一个函数里边套一个函数,他的继承是基于原型的,他的数组时动态变化的......而nodejs将这门奇葩到语言搬到了服务端,奇葩归奇葩,但是发自内心的说,他们非常灵活,也比较好玩。
关于nodejs适合io密集什么的我不懂,但是感觉入门还是比较容易的,我看的是清华出版到Node.js开发实战详解(不得不吐槽:这本书的错误真多),两三天就入门了。看了下后面的章节,感觉后边难度会有所加大,不过万物都是相通的,他和其他的比如php之类的还是会有很多共性的。
不得不提一下jade(现在叫pug)提供的模板引擎,他将我们美丽的html搞成了那个样子确实让人很不适应啊,相比之下更喜欢ejs这个模板引擎,发现他jsp长得好像啊,好像遇到旧友一般。
刚入门nodejs,关于文中的一些错误和不当之处还请各位园友多多批评指正。最后,如果你喜欢大~熊,请关注他。
玩一玩nodejs--一个简单的在线实时填表应用的更多相关文章
- 基于PHP实现一个简单的在线聊天功能(轮询ajax )
基于PHP实现一个简单的在线聊天功能(轮询ajax ) 一.总结 1.用的轮询ajax 二.基于PHP实现一个简单的在线聊天功能 一直很想试着做一做这个有意思的功能,感觉复杂的不是数据交互和表结构,麻 ...
- [NodeJS]使用Node.js写一个简单的在线聊天室
声明:教程来自<Node即学即用>.源代码案例均出自此书.博文仅为个人学习笔记. 第一步:创建一个聊天server. 首先,我们先来写一个Server: var net = require ...
- vertx.io 与nodejs 一个简单的性能比较
vertx.io 与node 都是可以进行js运行的一个引擎,但是vertx 支持的语言相对于node 多,可以查看官网.今天下网上查询相关的信息 时来了解到vertx.io 性能比node 好,于是 ...
- Nodejs 一个简单的后台实例
http://blog.csdn.net/u014595019/article/details/50845726
- 【Remoting】.Net remoting方法实现简单的在线升级(上篇:更新文件)
一.前言: 最近做一个简单的在线升级Demo,使用了微软较早的.Net Remoting技术来练手. 简单的思路就是在服务器配置一个Remoting对象,然后在客户端来执行Remoting ...
- 【玩转开源】BananaPi R2 —— 第三篇 基于Openwrt开发一个简单的路由器
上一篇讲解了R2的网口配置,这一篇我们以BananaPi R2为例子来实现一个简单的路由器:那么一个简单的路由器应该具备什么样的功能呢?最简单的说就是wan+lan+ap这三个功能. 首先wan+la ...
- nodejs实现一个简单的爬虫
nodejs是js语言,实现一个爬出非常的方便. 步骤 1. 使用nodejs的request模块,获取目标页面的html代码:https://github.com/request/request 2 ...
- 用nodejs搭建一个简单的服务器
使用nodejs搭建一个简单的服务器 nodejs优点:性能高(读写文件) 数据操作能力强 官网:www.nodejs.org 验证是否安装成功:cmd命令行中输入node -v 如果显示版本号表示安 ...
- 一个简单的零配置命令行HTTP服务器 - http-server (nodeJs)
http-server 是一个简单的零配置命令行HTTP服务器, 基于 nodeJs. 如果你不想重复的写 nodeJs 的 web-server.js, 则可以使用这个. 安装 (全局安装加 -g) ...
随机推荐
- UT源码-124
(1)设计三角形问题的程序 输入三个整数a.b.c,分别作为三角形的三条边,现通过程序判断由三条边构成的三角形的类型为等边三角形.等腰三角形.一般三角形(特殊的还有直角三角形),以及不构成三角形.(等 ...
- SharePoint JavaScript 客户端对象使用视频教程
本次视频教程是为大家介绍如何使用SharePoint JavaScript客户端对象,包括对于站点.列表.文档库.列表项.文件夹.文件和附件等基本对象的操作,同时,为大家举几个简单的应用的例子,让大家 ...
- windows_keyboard shortcuts快捷键
单独按Windows:显示或隐藏"开始"功能表 Windows+BREAK:显示"系统属性" 对话框 Windows+D:显示桌面 Windows+M:最小化所 ...
- 老李分享:robotium3.6与4.0 later 的区别 1
老李分享:robotium3.6与4.0 later 的区别 因为下载的直接是最新版本的robotium4.1版,这次碰到gridView问题时,发现网上有getCurrentListViews( ...
- display与visibility的使用(区别)
display:none;隐藏元素,且此元素无物理位置: visibility:hidden;隐藏元素,但元素的物理位置依然存在: 因为display:none导致页面上无此元素的空间,js就获取不到 ...
- 给 Java 学习者的超全教程整理
Java 在编程语言排行榜中一直位列前排,可知 Java 语言的受欢迎程度了. 网上有很多 Java 教程,无论是基础入门还是开发小项目的教程都比比皆是,可是系统的很少,对于Java 学习者来说找到系 ...
- win10 平台 elasticsearch 与 elasticsearch-head 的安装
由于elasticsearch是基于java开发的,所以 第一步需要安装JDK. 具体JDK的安装步骤 http://jingyan.baidu.com/article/6dad5075d1dc40 ...
- C++11 新特性总结
前言 转载请注明出处,感谢! C++11 的新特性 1 变量和基本类型 1.1 long long 类型 扩展精度浮点数,10位有效数字 1.2 列表初始化 初始化的几种不同形式,其中用花括号来初始化 ...
- 24(java_io from keyboard)
public class ReadFromKB{ public static void main(String args[]) { try { byte bArray[]=new byte[128]; ...
- 【react学习】关于react框架使用的一些细节要点的思考
( _(:3 」∠)_给园友们提个建议,无论是API文档还是书籍,一定要多看几遍!特别是隔一段时间后,会有意想不到的收获的) 这篇文章主要是写关于学习react中的一些自己的思考: 1.set ...