js实现WebSocket 连接 |
您所在的位置：网站首页 › js怎么连接服务器服务数据 › js实现WebSocket 连接 |
js实现WebSocket 连接
|
一.WebSocket 简单介绍
1.HTTP和WebSocket的区别
http：通信只能由客户端发起； WebSocket：服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话，属于服务器推送技术的一种；在webSocket协议下客服端和浏览器可以同时发送信息。 2.WebSocket应用场景数据推送：webSocket可以代替ajax轮询（即客户端通过一定的时间间隔不断向服务器发起请求获得数据，因此会占用许多带宽和服务器资源），但是webSocket不一样，当建立TCP连接后，服务器可以主动给客户端传递数据，能够更好的节省服务器资源和带宽，实现更实时的数据通讯。 Web Sockets能够在客户端和服务端之间发送非常少量的数据，而不必担心HTTP那样字节级的开销，由于传递的数据包很小，因此WebSockets非常适合移动应用。 缺点：制定协议的时间比制定JavaScript API的时间还要长。 1.创建WebSocket实例url：url之前需添加ws://（未加密）或wss://（已加密），类似http://、https:// protocol：与服务端定义的协议名称相同，协议的参数例如XMPP（Extensible Messaging and Presence Protocol）、SOAP（Simple Object Access Protocol）或者自定义协议。 var ws = new WebSocket('ws://url'); var ws1 = new WebSocket('ws://url', 'myprotocol'); var ws2 = new WebSocket('ws://url', ['protocol_1','protovol_2'])); 2.属性①readyState属性：WebSocket当前连接状态 属性值属性常量描述0CONNECTING正在与服务端建立WebSocket连接，还没有连接成功1OPEN连接成功并打开，可以发送消息2CLOSING进行关闭连接的操作，且尚未关闭3CLOSE连接已关闭或不能打开通过 ws.readyState属性查看当前连接状态，例 alert('ws连接状态：' + ws.readyState);②bufferedAmount：检查传输数据的大小，当客户端传输大量数据时使用避免网络饱和 ③protocol：在构造函数中使用，protocol参数让服务端知道客户端使用的WebSocket协议。而WebSocket对象的这个属性就是指的最终服务端确定下来的协议名称，可以为空 3.方法①发送数据：send() var message = { id: 1, title: '发送ws数据' } ws.send(JSON.stringify(message)); // 复杂的数据结构要先进行序列化②关闭连接：closed() ws.close() 4.事件WebSocket API是纯事件驱动，建立连接之后，可自动发送状态改变的数据和通知 事件描述onopen当建立websocket连接时触发，只触发一次onerror当连接出现错误时触发-因为当触发了onerror之后连接就会触发关闭事件onmessage当服务端发送数据时触发，可多次触发，页面数据展示处理模块–实现轮询onclose当websocket连接关闭时触发，只触发一次 5.使用示例 var ws = new WebSocket('ws://url'); // 获取连接状态 console.log('ws连接状态：' + ws.readyState); //监听是否连接成功 ws.onopen = function () { console.log('ws连接状态：' + ws.readyState); //连接成功则发送一个数据 ws.send('test1'); } // 接听服务器发回的信息并处理展示 ws.onmessage = function (data) { console.log('接收到来自服务器的消息：'); console.log(data); //完成通信后关闭WebSocket连接 ws.close(); } // 监听连接关闭事件 ws.onclose = function () { // 监听整个过程中websocket的状态 console.log('ws连接状态：' + ws.readyState); } // 监听并处理error事件 ws.onerror = function (error) { console.log(error); }相关：js中的websocket |
【本文地址】
今日新闻 |
推荐新闻 |