标签为 "javascript" 的文章

基于express+socket.io的nodejs聊天室

前几天晚上边看水浒边写的nodejs的聊天室,前面说了,放假之前要把近日学习nodejs的所有心得整理下,今天就是30号鸟~撒欢~,最后放这个聊天室出来给大家作为学习nodejs的参考示例,希望对大家有用。

感谢:cnodejs群里的老雷,及其微博上的基友们!顺祝大家长假快乐,顺祝自己明天动车不出轨,顺祝明年不再过节,感慨多了……

特点

聊天室主要功能及其特点:

  1. 采用nodejs(屁话)
  2. express框架,jade做模板
  3. socket.io做前后端的websocket通信
  4. 支持session
  5. 支持@私信功能

废话不多说了,注意点,基本前面的文章都提到了,下面罗列下:
配置nodejs.exe的windows目录结构
安装express及配置app.js文件
使用socket.io和node.js搭建websocket应用
在Express和Socket.IO中使用session

nodejs聊天室下载地址

基于express+socket.io的聊天室

聊天室服务器端js代码

继续阅读全文……

在Express和Socket.IO中使用session

在nodejs项目中对于一些认证需要用到session,例如我写的nodejs 聊天室的demo,就是通过session实现的认证。当存在session,直接进入聊天室,而不会重新登录。

在网上也找到不少关于Express框架中的session调用方法,可是发现真正能用的不是很多,今天根据聊天室的制作过程,整理下Express和socket.IO中使用session的具体方法。

Express的session是通过cookie实现的,用到了connect中的两个module:parseCookie和MemoryStore,前者是用来解析cookie,后者用来存储sesion。

引入所需module

Express框架中使用session必须先引入上面的两个模块,例如下面的代码:

var parseCookie = require('connect').utils.parseCookie,
	MemoryStore = require('connect/middleware/session/memory');
//建立一个memory store的实例
var storeMemory = new MemoryStore({
		reapInterval: 60000 * 10
	});

Express中app的配置

在app需要添加如下的配置:

app.configure(function(){
	app.use(express.bodyParser());//解析post
	app.use(express.cookieParser());//解析cookie
	//设置session
	app.use(express.session({
		secret: 'wyq',
		store:storeMemory 
	}));
});

在请求中使用session

在请求中我们可以使用request.session来调用session,例如下面的代码:

app.get('/',function(req,res){
	//使用request.session来判断是否登录	
	if( req.session.name && req.session.name!==''){
		//需要判断下是否已经登录
		res.redirect('/chat');
	}else{
		//读取登录页面,要求登录
		var realpath = __dirname + '/views/' + url.parse('login.html').pathname;
		var txt = fs.readFileSync(realpath);
		res.end(txt);
	}
});

websocket通信中使用session

在nodejs项目中,我们常常使用websockt来实现通信,所以websocket中也需要通过session来认证用户。本例使用socket.io来举例实现nodejs中websocket通信session的认证。关于socket.io的使用参考文章《使用socket.io和node.js搭建websocket应用

上面代码中引入了解析cookie的parseCookie,所以session是通过cookie来解析的。首先我们建立了socket的监听之后需要对监听到的头文件处理,解析出来cookie中的session。例如下面的代码:

var io = sio.listen(app);
//设置session
io.set('authorization', function(handshakeData, callback){
	// 通过客户端的cookie字符串来获取其session数据
	handshakeData.cookie = parseCookie(handshakeData.headers.cookie)
	var connect_sid = handshakeData.cookie['connect.sid'];
	if (connect_sid) {
		storeMemory.get(connect_sid, function(error, session){
			if (error) {
				// if we cannot grab a session, turn down the connection
				callback(error.message, false);
			}
			else {
				// save the session data and accept the connection
				handshakeData.session = session;
				callback(null, true);
			}
		});
	}
	else {
		callback('nosession');
	}
});

继续阅读全文……

使用socket.io和node.js搭建websocket应用

websocket是HTML5的一种新的通信协议,它是实现了浏览器与服务器的双向通讯。在 WebSocket API 中,浏览器和服务器只需要要做一个握手的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
关于websocket的更多信息,请移步维基百科

使用WebSocket

在客户端使用websocket需要创建WebSocket对象,通过提供的open、send、message、close等方法实现创建、发送、监听信息、关闭连接。例如下面的代码:

if('WebSocket' in window){
	// 创建websocket实例
	var socket = new WebSocket('ws://localhost:8080');
	//打开
	socket.onopen = function(event) {
	  // 发送
	  socket.send('I am the client and I\'m listening!');
	  // 监听
	  socket.onmessage = function(event) {
		console.log('Client received a message',event);
	  };
	  // 关闭监听
	  socket.onclose = function(event) {
		console.log('Client notified socket has closed',event);
	  };
	  // 关闭
	  //socket.close()
	};
}else{
	alert('本浏览器不支持WebSocket哦~');
}

现在chrome、firefox等浏览器都已经支持了websocket,而IE却没有。下面我们来简单说说服务器端对websocket的支持。

服务器端支持websocket的语言不少,而且都有相关的开源项目,例如php的phpwebsockets:http://code.google.com/p/phpwebsockets/,java的jWebsocket:http://jwebsocket.org/
更多的信息可以浏览这篇文章:Start Using HTML5 WebSockets Today

socket.io

socket.IO是一个websocket库,包括了客户端的js和服务器端的nodejs。官方地址:http://socket.io

客户端使用socket.io

去github clone socket.io的最新版本,或者直接饮用使用socket.io的CDN服务:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

下面可以创建使用socket.io库来创建客户端js代码了:

var socket = io.connect('http://localhost');
socket.on('news', function (data) {
	console.log(data);
	socket.emit('my other event', { my: 'data' });
});

socket.on是监听,收到服务器端发来的news的内容,则运行function,其中data就是请求回来的数据,socket.emit是发送消息给服务器端的方法。

使用socket.io和nodejs搭建websocket服务器端

socket.io不仅可以搭建客户端的websocket服务,而且支持nodejs服务器端的websocket。

nodejs安装socket.io

使用node插件管理包,运行下面的命令就可以安装成功socket.io

npm install socket.io

没有npm的或者windows用户可以使用github下载socket.io并且放入到node_modules文件夹中,具体配置可以参考文章:《nodejs教程:配置nodejs.exe的windows目录结构

nodejs建立socket.io服务

通过nodejs的http模块就可以方便的搭建websocket服务器环境,例如下面的代码:

// 引入需要的模块:http和socket.io
var http = require('http'), io = require('socket.io');
//创建server
var server = http.createServer(function(req, res){ 
  // Send HTML headers and message
  res.writeHead(200,{ 'Content-Type': 'text/html' }); 
  res.end('<h1>Hello Socket Lover!</h1>');
});
//端口8000
server.listen(8080);
//创建socket
var socket = io.listen(server);
//添加连接监听
socket.on('connection', function(client){   
	//连接成功则执行下面的监听
	client.on('message',function(event){ 
		console.log('Received message from client!',event);
	});
	//断开连接callback
	client.on('disconnect',function(){
		console.log('Server has disconnected');
	});
});

继续阅读全文……

nodejs教程:安装express及配置app.js文件

express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板。下面简单来说说express的安装和app.js文件的配置,然后在今后的教程中一步一步使用express.js搭建个聊天室。

安装express.js

如果你安装了npm,安装变得很简单,只需要在终端中运行下面的代码即可:

npm install express -gd

-g代表安装到NODE_PATH的lib里面,而-d代表把相依性套件也一起安装。如果沒有-g的话会安装目前所在的目录(会建立一个node_modules的文件夹),你可以透过以下指令来比较两者的不同:

npm list -g
npm list

如果没有npm,那么我可以使用github来git下来最新的express。
好了,现在你可以通过express testapp来建立express实例。以下是示例:

cd ~
express testapp
cd testapp
node app.js

这样就建立了一个testapp的nodejs应用,而app.js是默认的应用主js。下面来详细的说说app.js中的各项配置。

引入模块

var express = require('express');
 var app = module.exports = express.createServer();

require()是node.js提供的函数,可以让你引入其他模块以调用模块的函数和变量,默认下node.js会在$NODE_PATH和目前js所在目录下的node_modules文件夹下去寻找模块。require也可以用来载入自己写的模块哦~这样涉及到node.js的模块机制,后面有机会就在介绍。

第二行的express.createServer()就是在建立server,而中间的module.exports也是涉及到node.js的模块机制,以后再说。

express的app.js的详细配置说明

express.js继承自connect模块,所以如果你的node_modules文件夹下没有connect模块也是不行的。

设置views路径和模板

我们再来看下面两行:

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');

继续阅读全文……

nodejs教程:配置nodejs.exe的windows目录结构

上篇说了nodejs在cygwin下面的配置,可是用起来真的不爽,很多人在微博也说有nodejs.exe文件,于是试着配置下,发现nodejs.exe+github做插件管理,是在windows下面搭建nodejs服务器的不错选择。下面结合自身实践,简单说说。

nodejs.exe path配置

首先去官方下载最新版的nodejs.exe。下载后随便找个地方放,例如D:\\node。
有两种方法配置PATH,
1、直接把nodejs.exe复制到windows文件夹下,这样就不用在环境变量里面配置PATH了
2、配置PATH,在我的电脑属性里面找到环境变量,然后在系统变量中更改Path的属性添加;D:\\node,即放置nodejs.exe的目录地址,注意前面的”;”不能少

nodejs插件在windows下的管理

nodejs的有自己的插件管理包npm,可是在windows系统下不能使用,不过鉴于大多数的nodejs的插件都是通过github管理的,所以我们只要安装个github客户端就可以了,如果有必要还可以安装TortoiseGit,作为图形化Git管理。
nodejs的插件都是放在node_modules的文件夹下,所以我们在node文件夹下建立node_modules的文件夹,将下载的nodejs的插件都放在这个文件夹下,或者直接在node_modules文件夹中直接git clone出来最新版的插件即可。

nodejs的插件引用方法

继续阅读全文……

使用cygwin在windows下安装nodeJS

nodeJS火的不行鸟,早就想安装下试试,对于Ubuntu系统是很容易的,可是自从电脑重装了win7系统,就没ubuntu系统了,今天试用了用cygwin安装nodejs。具体过程如下:

安装cygwin

cygwin是一个在windows平台上运行的unix模拟环境,是cygnus solutions公司开发的自由软件。下载地址是:http://cygwin.com/setup.exe。

安装cygwin几个要点

(1)Install from Internet,安装程序在后面步骤会下载大量文件。
(2)Root Directory,是Cygwin的安装目录。
(3)Local Package Directory,是存放所有下载文件的目录,子目录名即下载镜像网址,子目录下的release目录存放的就是所下载的包。
(4)选择连接方式:可以直接连接(Direct Connection),也可以使用代理(Proxy)。
(5)下载镜像站点推荐:
http://mirrors.163.com/cygwin
http://mirrors.sohu.com/cygwin/
也可以获得官方镜像列表后自己验证,http://cygwin.com/mirrors.lst

(6)首次安装提示信息,OK忽略,但如果安装过cygwin 1.7以下版本,参考:
http://cygwin.com/cygwin-ug-net/ov-new1.7.html
(7)建议第一次安装是默认的安装项,第二次在选择nodejs的所需包。
继续阅读全文……

javascript入门到高级PPT

前些日子参加了公司RIA的实习生和新员工的javascript培训课程,做了个PPT,今天拿来跟大家分享下,高手飘过,欢迎拍砖。
本课程分了两段,第一部分是javascript入门基础和中级教程,后面是高级,讲到了javascript的作用域链和原型链,以及javascript面向对象的继承写法,最后简单提了一下前端安全,最后简单介绍了下前端的发展和展望,要新员工开阔下眼界,同时提供了一些学习的资源和RSS源。
继续阅读全文……

javascript的词法作用域

大家应该写过下面类似的代码吧,其实这里我想要表达的是有时候一个方法定义的地方和使用的地方会相隔十万八千里,那方法执行时,它能访问哪些变量,不能访问哪些变量,这个怎么判断呢?这个就是我们这次需要分析的问题——词法作用域

var classA = function(){
    this.prop1 = 1;
}
classA.prototype.func1 = function(){
    var that = this,
        var1 = 2;
 
    function a(){
        return function(){
            alert(var1);
            alert(this.prop1);
        }.apply(that);
    };
    a();
}
var objA = new ClassA();
objA.func1();

词法作用域:变量的作用域是在定义时决定而不是执行时决定,也就是说词法作用域取决于源码,通过静态分析就能确定,因此词法作用域也叫做静态作用域。 with和eval除外,所以只能说JS的作用域机制非常接近词法作用域(Lexical scope)。

下面通过几个小小的案例,开始深入的了解对理解词法作用域和闭包必不可少的,JS执行时底层的一些概念和理论知识。

经典案列重现

1、经典案例一

/*全局(window)域下的一段代码*/
function a(i) {
    var i;
    alert(i);
};
a(10);

疑问:上面的代码会输出什么呢?
答案:没错,就是弹出10。具体执行过程应该是这样的

a 函数有一个形参 i,调用 a 函数时传入实参 10,形参 i=10
接着定义一个同名的局部变量 i,未赋值
alert 输出 10

思考:局部变量 i 和形参 i 是同一个存储空间吗?

2、经典案例二

/*全局(window)域下的一段代码*/
function a(i) {
    alert(i);
    alert(arguments[0]); //arguments[0]应该就是形参 i
    var i = 2;
    alert(i);
    alert(arguments[0]);
};
a(10);

疑问:上面的代码又会输出什么呢?(( 10,10,2,10 || 10,10,2,2 ))
答案:在FireBug中的运行结果是第二个10,10,2,2,猜对了… ,下面简单说一下具体执行过程
继续阅读全文……

第2页 / 共9页 123456789
返回顶部