websocket学习笔记

来源：互联网发布：数据产品运营专员编辑：程序博客网时间：2024/05/28 17:05

最近写了一个websocket协议做的浏览器端实时通信demo，下边是关于websocket的一些学习总结。

1、websocket是什么

websocekt是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。WebSocket通信协议于2011年被IETF定为标准RFC 6455，WebSocketAPI被W3C定为标准。所谓全双工，就是通许数据在两个方向上同时传输,可以同时（瞬时）进行信号的双向传输（server->client&&client->server).

2、websocket优点是什么

Header
通过第一个 HTTP request 建立了 TCP 连接之后，之后的交换数据都不需要再发 HTTP request,节省资源。

第13版且浏览器为Chrome的握手如下：

浏览器请求

GET / HTTP/1.1Upgrade: websocketConnection: UpgradeHost: example.comOrigin: nullSec-WebSocket-Key: sN9cRrP/n9NdMgdcy2VJFQ==Sec-WebSocket-Version: 13

服务器回应

HTTP/1.1 101 Switching ProtocolsUpgrade: websocketConnection: UpgradeSec-WebSocket-Accept: fFBooB7FAkLlXgRSz0BT3v4hq5s=Sec-WebSocket-Origin: nullSec-WebSocket-Location: ws://example.com/

以上代码的原理：
在请求中的“Sec-WebSocket-Key”是随机的，服务器端会用这些数据来构造出一个SHA-1的信息摘要。把“Sec-WebSocket-Key”加上一个魔幻字符串“258EAFA5-E914-47DA-95CA-C5AB0DC85B11”。使用SHA-1加密，之后进行BASE-64编码，将结果做为“Sec-WebSocket-Accept”头的值，返回给客户端。客户端拿到 Sec-WebSocket-Accept ，然后本地做一次验证，如果验证通过了，就会触发 onopen 函数，连接成功。

服务器推送

服务器可以主动传送数据给客户端。传统web服务都是请求->响应模型，即客户端（浏览器）请求服务端（webserver），服务器端收到请求后才能做出响应，客户端才能接收数据，可以理解为“拉“，webscoekt提供浏览器和服务器之间长连接，可以实现服务器端直接通知客户端，即”推“，实时性、效率都较高。

3、websocket和传统数据传输的区别

先说一下ajax和long poll轮询的原理。

ajax是让浏览器每隔几秒就发送一次请求，询问服务器是否有新消息。很明显，这样会出现很多资源浪费。

example:
client：嗒嗒嗒，有新消息吗？
server：没有。
client：嗒嗒嗒，有新消息吗？
server：没有。
client：嗒嗒嗒，有新消息吗？
server：没有，你好烦！
client：。。。。

long poll和ajax类似，但不是一直去情求，而是请求一下如果没消息就不挂电话，直到有消息返回，返回之后，再次建立连接。

example:
client：嗒嗒嗒，我在等消息。
server：额。现在没消息。
client：那就有消息告诉我。。
server：等着吧。

总之，这两种方式都会造成资源的浪费long poll需要很高的并发。
言归正传，websocket。
websocket解决了上边两种方式存在的问题，只需一次握手，就可以妥妥的互发消息。

example:
client：嗒嗒嗒，我要建立websocket协议连接（HTTP Request）
server：OK，我们建立连接。
server：有消息我会告诉你。
client：嗒嗒嗒，保持联系哦。

对比可以明显看出，websocket的优势所在。

4、websocket实时通信实例
实现websocket有很多方案，下边是服务器端node.js+客户端socket.io做的demo。

websocket客户端程序：

index.html

<!DOCTYPE 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 () {                $('#history').append($('<li>已连接！</li>'));                iosocket.on('message', function(message) {                    $('#history').append($('<li></li>').text(message));                });                iosocket.on('disconnect', function() {                    $('#history').append('<li>断开连接</li>');                });            });            $('#input').keypress(function(event) {                if(event.which == 13) {                    event.preventDefault();                    iosocket.send($('#input').val());                    $('#history').append($('<li></li>').text($('#input').val()));                    $('#input').val('');                }            });        });    </script></head><body>记录: <ul id="history"></ul><br /><input type="text" id="input"></body></html>

websocket服务端程序：

app.js

<span style="font-size:14px;">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'});    res.end(fs.readFileSync(__dirname + '/index.html'));  </span><span style="font-size: 14px; font-family: Arial, Helvetica, sans-serif;">   //将index.html输出</span><span style="font-size:14px;">}).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);    });});</span>

安装node环境后，npm安装socket.io,运行app.js代码，本机几个窗口访问http://localhost:3000,即可实时通信。

这只是演示连接用的demo，具体白板+语音通话将很快上传。

如果有什么错误，谢谢大家指正

2 1