原文摘自我的前端博客,欢迎大家来访问
简介
最近看Node.js和HTML5,练手了一个简易版的聊天DEMO,娱乐一下
为什么需要socket.io?
node.js提供了高效的服务端运行环境,但是由于浏览器端对HTML5的支持不一, 为了兼容所有浏览器,提供卓越的实时的用户体验,并且为程序员提供客户端与服务端一致的编程体验, 于是socket.io诞生。
简答来说socket.io具体以下特点:
1.socket.io设计的目标是支持任何的浏览器,任何Mobile设备。目前支持主流的PC浏览器 (IE,Safari,Chrome,Firefox,Opera等),Mobile浏览器(iphone Safari/ipad Safari/android WebKit/WebOS WebKit等)。socket.io基于node.js并简化了WebSocket API,统一了通信的API。它支持:WebSocket, Flash Socket, AJAX long-polling, AJAX multipart streaming, Forever IFrame, JSONP polling。
2.socket.io解决了实时的通信问题,并统一了服务端与客户端的编程方式。启动了socket以后,就像建立了一条客户端与服务端的管道,两边可以互通有无。
代码
创建app.js 源码如下
var fs = require('fs') //文件操作
, http = require('http') //http服务器
, socketio = require('socket.io'); //socket.io,用来和前台进行交互
var server = http.createServer(function(req, res) {
res.writeHead(200, { 'Content-type': 'text/html'});
//将index.html输出
res.end(fs.readFileSync(__dirname + '/index.html'));
}).listen(3000, function() {
console.log('Listening at: http://localhost:3000');
});
//连接成功的回调
socketio.listen(server).on('connection', function (socket) {
socket.on('message', function (msg) {
console.log('接受到 ', msg);
//将信息发送给其他客户端
socket.broadcast.emit('message', msg);
});
});
创建index.html
<html>
<head>
<meta charset="utf-8">
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script>
$(function(){
var iosocket = io.connect();
iosocket.on('connect', function () {
$('#incomingChatMessages').append($('<li>已连接!</li>'));
iosocket.on('message', function(message) {
$('#incomingChatMessages').append($('<li></li>').text(message));
});
iosocket.on('disconnect', function() {
$('#incomingChatMessages').append('<li>失去连接</li>');
});
});
$('#outgoingChatMessage').keypress(function(event) {
if(event.which == 13) {
event.preventDefault();
iosocket.send($('#outgoingChatMessage').val());
$('#incomingChatMessages').append($('<li></li>').text($('#outgoingChatMessage').val()));
$('#outgoingChatMessage').val('');
}
});
});
</script>
</head>
<body>
控制台: <ul id="incomingChatMessages"></ul>
<br />
<input type="text" id="outgoingChatMessage">
</body>
</html>
运行&结果
因为依赖了socket.io包,所以用npm 下载
npm install socket.io
最后直接运行
node app.js
![home](https://i-blog.csdnimg.cn/blog_migrate/425c499e3fc12ae296ba14eeebe8d7a0.png)
附上一个实现了很炫聊天DEMO http://segmentfault.com/a/1190000000479518
![home](https://i-blog.csdnimg.cn/blog_migrate/4b7969f07f377584e43730b932f14ef6.png)
end from http://hacke2.github.io