node学习笔记——webSocket和Socket.IO框架

发表于 | 分类于

前言

HTTP无法轻松实现实时应用，因为 HTTP 协议是无状态的，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。

虽然我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。

但是，聊天室确实存在，实现方法（非websocket）：

  • 长轮询：客户端每隔很短的时间，都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，例如1秒，就能给人造成交互是实时进行的印象。这种做法是无奈之举，实际上对服务器、客户端双方都造成了大量的性能浪费。
  • 长连接：客户端只请求一次，但是服务器会将连接保持，不会返回结果（想象一下我们没有写res.end()时，浏览器一直转小菊花）。服务器有了新数据，就将数据发回来，又有了新数据，就将数据发回来，而一直保持挂起状态。这种做法的也造成了大量的性能浪费。

所以 WebSocket 协议孕育而生，WebSocket 协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了。

webSocket与Socket.IO

WebSocket 的原理非常的简单：利用 HTTP 请求产生握手，HTTP头部中含有 WebSocket 协议的请求，所以握手之后，二者转用 TCP 协议进行交流（QQ的协议）。现在的浏览器和服务器之间，就是QQ和QQ服务器的关系了。

所以WebSocket协议，需要浏览器支持，更需要服务器支持。

支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5

支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3

Node.js上需要写一些程序，来处理TCP请求。

Node.js 从诞生之日起，就支持 WebSocket 协议。不过，从底层一步一步搭建一个 Socket 服务器很费劲（想象一下Node写一个静态文件服务都那么费劲）。所以，有大神帮我们写了一个库 Socket.IO。

Socket.IO 屏蔽了所有底层细节，让顶层调用非常简单。并且还为不支持WebSocket协议的浏览器，提供了长轮询的透明模拟机制。

Node的单线程、非阻塞I/O、事件驱动机制，使它非常适合Socket服务器。

网址：http://socket.io/

简单使用

先要npm下载这个库npm install socket.io

写原生的JS，搭建一个服务器，server创建好之后，创建一个io对象:

1
2
3
4
5
6
7
8
9
10
11
12
13
var http = require("http");

var server = http.createServer(function(req,res){
  res.end("你好");
});
//实例化io对象，此时网址/socket.io/socket.io.js将被默认提供一个静态js文件服务
var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
  console.log("1个客户端连接了");
})

server.listen(3000,"127.0.0.1");

写完这句话之后，你会发现，当你访问 http://127.0.0.1:3000/socket.io/socket.io.js 就是一个js文件的地址了。

现在需要制作一个index页面，这个页面中，必须引用秘密js文件。调用io函数，取得socket对象：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<h1>我是index页面，我引用了秘密script文件</h1>
	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript">
		var socket = io();
	</script>
</body>
</html>

此时，在服务器上，app.js中就要书写静态文件呈递程序，能够呈递静态页面:

1
2
3
4
5
6
7
8
var server = http.createServer(function(req,res){
  if(req.url == "/"){
	//显示首页
    fs.readFile("./index.html",function(err,data){
	  res.end(data);
	});
  }
});

至此，服务器和客户端都有socket对象了。

接着，通过 socket 对象的 emit方法和on方法。 emit 方法用于发送一个自定义事件，on 方法用于监听服务器发送的自定义事件。

服务器端的：

1
2
3
4
5
6
7
8
9
var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
  console.log("1个客户端连接了");
  socket.on("tiwen",function(msg){
	console.log("本服务器得到了一个提问" + msg);
	  socket.emit("huida","吃了");
  });
});

每一个连接上来的用户，都有一个socket。 由于我们的emit语句，是socket.emit()发出的，所以指的是向这个客户端发出语句。

此外，还有广播，就是给所有当前连接的用户发送信息：

1
2
3
4
5
6
7
8
9
10
//创建一个io对象 
var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
  console.log("1个客户端连接了");
  socket.on("tiwen",function(msg){
	console.log("本服务器得到了一个提问" + msg);
	io.emit("huida","吃了");
  });
});

Express与Socket.IO

Express框架可以和Socket.IO搭配使用，但是不能像通常的Express程序那样，用app.listen进行监听了，而是采用一种固定的模式：

1
2
3
4
5
6
var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);

http.listen(3000);

简单的聊天室

后台 app.js:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
var express = require('express');
var app = express();
//socket.io公式：
var http = require('http').Server(app);
var io = require('socket.io')(http);
//session公式：
var session = require('express-session');
app.use(session({
    secret: 'keyboard cat',
    resave: false,
    saveUninitialized: true
}));

//模板引擎
app.set("view engine","ejs");
//静态服务
app.use(express.static("./public"));

var alluser = [];

//中间件
//显示首页
app.get("/",function(req,res,next){
	res.render("index");
});
//确认登陆，检查此人是否有用户名，并且昵称不能重复
app.get("/check",function(req,res,next){
	var yonghuming = req.query.yonghuming;
	if(!yonghuming){
		res.send("必须填写用户名");
		return;
	}
	if(alluser.indexOf(yonghuming) != -1){
		res.send("用户名已经被占用");
		return;
	}
	alluser.push(yonghuming);
	//付给session
	req.session.yonghuming = yonghuming;
	res.redirect("/chat");
});
//聊天室
app.get("/chat",function(req,res,next){
	//这个页面必须保证有用户名了，
	if(!req.session.yonghuming){
		res.redirect("/");
		return;
	}
	res.render("chat",{
		"yonghuming" : req.session.yonghuming
	});
})

io.on("connection",function(socket){
	socket.on("liaotian",function(msg){
		//把接收到的msg原样广播 
		io.emit("liaotian",msg);
	});
});

//监听
http.listen(3000);

登陆页面 index.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 700px;
			height: 30px;
			padding: 40px;
			border: 1px solid #000;
			margin: 0 auto;
		}
		#yonghuming{
			font-size: 30px;
		}
	</style>
</head>
<body>
	<div>
		<form action="/check" method="get">
			输入昵称：
			<input type="text" id="yonghuming" name="yonghuming"/>
			<input type="submit" value="进入聊天室" />
		</form>
	</div>
</body>
</html>

聊天页面 chat.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.caozuo{
			position: fixed;
			bottom: 0;
			left: 0;
			height: 100px;
			background-color: #ccc;
			width: 100%;
		}
		.caozuo input{
			font-size: 30px;
		}
		.caozuo input[type=text]{
			width: 100%;
		}
	</style>
</head>
<body>
	<h1>小小聊天室 欢迎：<span id="yonghu"><%=yonghuming%></span></h1>
	<div>
		<ul class="liebiao">
			
		</ul>
	</div>

	<div class="caozuo">
		<input type="text" id="neirong" />
	</div>

	<script type="text/javascript" src="/socket.io/socket.io.js"></script>
	<script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
	<script type="text/javascript">
		var socket = io();
		$("#neirong").keydown(function(e){
			if(e.keyCode == 13){
				//把文本框的内容上传：
				socket.emit("liaotian",{
					"neirong" : $("#neirong").val(),
					"ren" : $("#yonghu").html()
				});
				$(this).val("");
			}
		});

		socket.on("liaotian",function(msg){
			$(".liebiao").prepend("<li><b>" + msg.ren + "：</b>"+ msg.neirong + "</li>");
		});
	</script>
</body>
</html>



完~