基于Ws的WebSocket通信实例解析

WebSocket的目标是在一个单独的持久链接上提供全双工、双向通信。在JS建立webSocket之后，会有一个http发送到浏览器以发起链接，在取得服务器响应后，建立的连接会使用http升级从http协议交换为WebSocket协议，也就是说，使用标准的Http协议无法实现WebSockts,只有支持这种协议的专门服务器才能正常工作。

WebSockets使用了自定义的协议，所以URL的模式也略有不同，未加密的连接不再是htttp://,而是ws://；加密的协议不是Https://而是wss://，在使用 WebSocket URL时，必须带着这个模式，因为将来还有可能支持其他模是式。

使用自定义的协议而非http协议的好处是，能够在客户端和服务器之间发送非常少量的数据，而不必担心http那样字节级法人开销，由于传递的数据包很小，因此WebSocket协议非常适合移动应用。

接下来就是WebSocket通信例子的解析，内容较为简单，只是个大概过程。

 var wsSocket;
        //通过websocket来通信
        if(!!window.WebSocket && (wsSocket = window.WebSocket)){
            try{
                /*
                * 实例一个WebSocket对象并传入要连接的URL
                * 需要注意的是，必须要给WebSocket构造函数传入绝对的URL，同源策略对WebSocket不适用，因此可以通过它打开到任何站点的链接，至于是否会给某个域中的页面通信，完全取决于服务器
                * */
                ws = new wsSocket('ws://localhost:3020/JA/server');   //var wsSocket;
                /*
                * 实例化了WebSocket对象后，浏览器就会马上尝试建立连接，与XHR相似，WebSocket也有一个表示当前状态的ReadyState属性，不过这个属性与XHR不同
                * WebSocket.onOpen(0):正在建立连接
                * WebSocket.open(1):已经建立连接
                * WebSocket.closing(2):正在关闭连接
                * WebSocket.close(3):已经关闭连接
                * WebSocket没有readyStateChange事件，不过，它还有其他事件，对应中而不同的状态，readyState的永远从0开始
                *
                * 要关闭WebSocket方法，可以在任何事件调用close方法
                * socket.close()
                * 调用close()之后，readyState的值立刻编程2，然后关闭连接后变成3
                * */
                ws.onopen = function (event) {
                    ws.type = 'ws';  //非加密的webSocket连接
                    send('Test', function (data) {  //发送数据 send()中可以传入任意字符串
                        cosnsole.log('正在建立连接')
                    });
                };
                //关闭WebSocket连接，ws置为undefined
                ws.onclose = function (event) {
                    ws = undefined;
                };
                //在发生错误是触发，连接不能持续，ws置为undefined
                ws.onerror = function (event) {
                    ws = undefined;
                    console.log('通信发出错误')
                };
                /*
                * 因为WebSocket只能通过连接发送纯文本数据，所以对于复杂的数据结构，在链接发送之前，必须进行序列化然后在发送到服务器
                * socket.send(JSON.stringify(message));
                * 接下来服务器要读取其中的数据，就要解析收到的JSON字符串
                * */

                //当服务器向客户端发来信息时，WebSocket对象就会触发onMessage事件，
                // 这个message事件与其他传递消息的协议类似，也是把返回值保留在event.data中

                ws.onmessage = function (event) {
                    var data;
                    try{
                        data = JSON.parse(event.data);
                    } catch (e) {
                        console.log('exception==>' + event.data + '----' +  e);
                    }
                }
            }
        }

基于Ws的WebSocket通信实例解析

猜你喜欢