内容简介：●● 我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了。
HTTP无法轻松实现实时应用：
● HTTP协议是无状态的 ，服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。
● 我们可以非常轻松的捕获浏览器上发生的事件（比如用户点击了盒子），这个事件可以轻松产生与服务器的数据交互（比如Ajax）。但是，反过来却是不可能的：服务器端发生了一个事件，服务器无法将这个事件的信息实时主动通知它的客户端。只有在客户端查询服务器的当前状态的时候，所发生事件的信息才会从服务器传递到客户端。
WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端了。
● 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服务器。
我们来看怎么做
先要npm下载这个库
1npm install socket.io
写原生的JS，搭建一个服务器，server创建好之后，创建一个io对象
1var http = require("http");
2
3var server = http.createServer(function(req,res){
4 res.end("你好");
5});
6
7var io = require('socket.io')(server);
//监听连接事件
io.on("connection",function(socket){
console.log("1个客户端连接了");
})
8
9server.listen(3000,"127.0.0.1");
写完这句话之后，你就会发现， http://127.0.0.1 :3000/socket.io/socket.io.js 就是一个js文件的地址了。
现在需要制作一个index页面，这个页面中，必须引用秘密js文件。调用io函数，取得socket对象。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6</head>
7<body>
8 <h1>我是index页面，我引用了秘密script文件</h1>
9 <script type="text/javascript" src="/socket.io/socket.io.js"></script>
10 <script type="text/javascript">
11 var socket = io();
12 </script>
13</body>
14</html>
此时，在服务器上，app.js中就要书写静态文件呈递程序，能够呈递静态页面。
1var server = http.createServer(function(req,res){
2 if(req.url == "/"){
3 //显示首页
4 fs.readFile("./index.html",function(err,data){
5 res.end(data);
6 });
7 }
8});
至此，服务器和客户端都有socket对象了。服务器的socket对象：
服务器端的：
1var io = require('socket.io')(server);
2//监听连接事件
3io.on("connection",function(socket){
4 console.log("1个客户端连接了");
5 socket.on("tiwen",function(msg){
6 console.log("本服务器得到了一个提问" + msg);
7 socket.emit("huida","吃了");
8 });
9});
每一个连接上来的用户，都有一个socket。 由于我们的emit语句，是socket.emit()发出的，所以指的是向这个客户端发出语句。
广播，就是给所有当前连接的用户发送信息：
1//创建一个io对象
2var io = require('socket.io')(server);
3//监听连接事件
4io.on("connection",function(socket){
5 console.log("1个客户端连接了");
6 socket.on("tiwen",function(msg){
7 console.log("本服务器得到了一个提问" + msg);
8 io.emit("huida","吃了");
9 });
10});
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- 基于Google MVVM框架的baseMVVM框架
- Spring 框架是怎么出生的（二）：重构提炼出框架
- Spring 框架是怎么出生的（二）：重构提炼出框架
- Genesis框架从入门到精通（7）： 框架的过滤器
- 如何打造自己的POC框架-Pocsuite3-框架篇
- 如何打造自己的PoC框架-Pocsuite3-框架篇
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
赢在设计
[美] 洛芙迪 (Lance Loveday)、[美] 尼豪斯 (Sandra Niehaus) / 刘淼、枊靖、王卓昊 / 人民邮电出版社 / 2010-8 / 55.00
企业总是面临在网站设计和改进方面进行投资的抉择。怎样才能让有限的资金发挥出最大的效益呢？网站设计不应只是把网站做得赏心悦目，它更应该是提高经济收益和获得竞争优势的战略利器。是时候让网站发挥其潜能，以业务指标为导向来做设计决策，为提升网站收益而设计了。 作者凭借多年为众多网站做咨询工作的经验，为我们揭示了赢在设计的奥秘。它针对目前网站设计中存在的典型问题，先从宏观上探讨解决问题的战略手段，围绕......一起来看看 《赢在设计》 这本书的介绍吧!
XML、JSON 在线转换
在线XML、JSON转换工具
XML 在线格式化
在线 XML 格式化压缩工具