web Socket &amp; Socket.io

2016-07-06 01:23:00

HTTP

HTTP无法轻松实现实时应用：

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

但是，确实聊天室确实存在

方法：

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

WebSocket协议

WebSocket协议能够让浏览器和服务器全双工实时通信，互相的，服务器也能主动通知客户端

WebSocket的原理非常的简单：利用HTTP请求产生握手，HTTP头部中含有WebSocket协议的请求，所以握手之后，二者转用TCP协议进行交流（QQ的协议）。现在的浏览器和服务器之间，就是QQ和QQ服务器的关系了。所以WebSocket协议，需要浏览器支持，更需要服务器支持。
支持WebSocket协议的浏览器有：Chrome 4、火狐4、IE10、Safari5
支持WebSocket协议的服务器有：Node 0、Apach7.0.2、Nginx1.3
Socket.IO是业界良心，新手福音。它屏蔽了所有底层细节，让顶层调用非常简单。并且还为不支持WebSocket协议的浏览器，提供了长轮询的透明模拟机制。
Node.js上需要写一些程序，来处理TCP请求。使用require('dgram') 模块
Node的单线程、非阻塞I/O、事件驱动机制，使它非常适合Socket服务器。

Socket.io

npm install socket.io

制作index.html页面。页面中必须引入 /socket.io/socket.io.js, 调用io函数，取得socket对象。

    var socket = io();  //socket 对象

服务器中：

var io = require('sockte.io')(server);io.on('connection',function( socket ){    //socket 对象    socket.on('tiwen',function( msg ){        console.log('服务器接受到了请求');        //sockte.emit('huida','ok'); //单条返回        //广播 , 就是给当前所有用户的发送信息。        io.emit('huida','ok');    });});

客户端和服务器，都有socket对象。两个对象都具有emit，和on的时间。emit用于发送，on用户接受。
发送的内容可以是任何类型的值。

案例

前台页面：

# index页面信息内容：发送：     var socket = io();    document.getElementById("btn").onclick = function (  ) {        socket.emit('tiwen',document.getElementById("info").value);    }    socket.on('huida',function ( msg ) {        console.log('回答：' +　msg);    });

后台：

var http = require('http');var fs = require('fs');var server = http.createServer(function ( req,res ) {    if (  req.url == '/' ) {        //显示首页        fs.readFile('./index.html',function ( err,data ) {            res.end(data);        });    }});//创建io对象var io = require('socket.io')(server);//监听连接事件io.on('connection',function ( socket ) {    console.log( '一个客户端连接了' );    socket.on('tiwen',function ( msg ) {//        console.log( '提问为：' + msg );//        socket.emit('huida','好呀');        //加上广播        io.emit('huida',msg);    });});server.listen(80);

关键字：JavaScript, html5, node.js, socket

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击举报进行投诉反馈！