WebSocket

时间：2025-02-15 17:08:43

ajax轮询

每隔一段时间发送一次请求询问服务器有消息发送不（需要服务器有很快的处理速度）

长轮询

发送一次请求然后一直等待直到服务器有消息发送，服务器发完消息后连接中断，客户端重新建立连接请求，周而复始重复。（需要服务器有很高的并发性，即同时处理）

以上两种都需要重复建立连接，且容易使服务器崩溃。

websocket

是HTML5的新协议，实现了浏览器和服务器的全双工通信，节省带宽实时通信。还是需要通过HTTP请求建立连接

Upgrade:websocket    
Connection:Upgrade  
Sec-WebSocket-Key:gjre9ujg9-ertiuhffuuuh

其中， Sec-Websocket-Key是客户端发送的一个base64编码的密文，要求服务器端返回一个对应加密的应答Sec-WebSocket-Accept。

一个websocket连接是在客户端和服务器端的http协议初始握手阶段升级到websocket协议的，底层还是TCP连接

websocket和http共享端口80和443（安全版本）

利用nodejs-websocket实现简单聊天界面

1. npm install nodejs-websocket

页面实现消息的发送与显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>chat room</title>
    <style type="text/css">
        #messageArea {
            padding: 10px;
            width: 50%;
            border: thin sienna;
        }

        #messageArea p {
            border-bottom: thin solid gray;
        }
        #connection p {
            border-bottom: thin solid red;
        }
    </style>
</head>
<body>
<h1>chat room</h1>
<input id="text">
<input type="button" id="button" value="send">
<div id="messageArea"></div>
<div id="connection"></div>
<script type="text/javascript">
    var text = ('text');
    var mesAre = ('messageArea');
    var button = ('button');
    var connection = ('connection');
    var ws = new WebSocket('ws://localhost:8080');//在8080端口建立websocket连接，注意此处的协议为ws

     = function () {
        ('connected!');//连接打开后显示
         = function () {
            var sendText =  ?  : 'empty data';
            (sendText);//连接打开后并点击按钮时发送input中的消息
        }
    };
     = function (e) {
        var obj = JSON.parse();
        showMessage(obj);//接收到消息时显示消息
    };

     = function () {
        ('closed');//连接关闭
    };
    function showMessage(obj) {
        (JSON.stringify(obj));
        var p;
        switch (){
            case 'establish':
                 = +' in';
                p = ('p');
                 = 'user '++' established';
                (p);
                break;
            case 'context':
                p = ('p');
                 = 'message from '+ +' : '+ ;
                (p);
                break;
            case 'close':
                p = ('p');
                 = 'user '++' closed';
                (p);
                break;
            default:
                break;
        }
    }
</script>
</body>
</html>

服务器端设置

var port = 8080;
var ws = require('nodejs-websocket');
var count = 0;
var server = (function (conn) {//建立websocket服务器
    count++;//每当打开一个连接后，server中的connections属性上就会添加一个新连接
    var detail = {
        count: count,
        type: 'establish'
    };

     = count;//每个连接的标识
    broadcast(JSON.stringify(detail));

    ('new connection');

    ('text', function (str) {//客户端调用send方法时触发
        var detail = {
            count: this.seq,
            type: 'context',
            context: str
        };
        var textDetail = JSON.stringify(detail);
        broadcast(textDetail);//将客户端发来的消息广播到所有客户端
        ('received ' + textDetail);
    });
    ('close', function (code, reason) {
        var detail = {
            count: this.seq,
            type: 'close',
        };
        var textDetail = JSON.stringify(detail);
        broadcast(textDetail);
        ('connection closed ' + code + ' ' + reason);
    });
    ('error', function () {
        ('error')
    })
}).listen(port);

function broadcast(str) {//广播发送消息
    (function (conn) {
        var obj = JSON.parse(str);
         = ;
        (JSON.stringify(obj));
        (JSON.stringify(obj));
    });
}

相关文章