赞
踩
目录
WebSocket的定义
WebSocket是Html5提供的一种在单个TCP连接上进行双向通信的协议,解决了客户端和服务端之间的实时通信问题。浏览器和服务器只需要完成一次握手,二者之间就可以创建一个持久性的TCP连接,从而实现双向实时通信。
WebSocket的优点
很多网站利用AJAX轮询实现数据推送,轮询是在特定时间间隔,由浏览器主动发起请求,将服务器的数据拉回来。轮询需要不断向服务器发送请求,会占用很多带宽和服务器资源。WebSocket建立TCP连接后,服务器可以主动给客户端推送数据,能够更好的节省带宽和服务器资源,实现更实时的数据通信。
如下右图所示,浏览器通过JS向服务器发出建立WebSocket连接的请求,连接建立以后,客户端和服务端就可以通过TCP连接直接交换数据。当获取WebSocket连接后,可以通过send()方法来向服务器发送数据,并通过onmessage事件接收服务器返回的数据。
创建WebSocket实例
如下代码所示,创建Websocket实例。
- // 第一个参数:连接的URL, 必填
- // 第二个参数:指定可接受的自协议, 选填
- var Socket = new WebSocket(url, [protocol] );
WebSocket属性
如下图所示,为WebSocket对象的属性。
WebSocket事件
如下图所示,为WebSocket对象的相关事件。
WebSocket方法
如下图所示,为Websocket对象的相关方法。
WebSocket实例
WebSocket本质上是一个基于TCP的协议。为了创建一个WebSocket连接,浏览器需要向服务器发起一个HTTP请求,这个请求和普通的HTTP请求不同,它包含了一些附加头信息,服务器解析这些附加头信息后产生的应答信息返回给客户端,客户端和服务端的连接就建立起来了,双方可以通过连接通道自由传递信息,并且这个连接会持续存在,直到客户端或服务端某一方主动关闭连接。
- // 申请一个WebSocket对象,参数是服务端地址,同http协议使用http://开头一样,
- // WebSocket协议的url使用ws://开头,另外安全的WebSocket协议使用wss://开头
- var ws = new WebSocket("ws://localhost:8080");
-
- // 当WebSocket创建成功时,触发onopen事件
- ws.onopen = function(){
- console.log("open");
- ws.send("hello"); //将消息发送到服务端
- }
- // 当客户端收到服务端发来的消息时,触发onmessage事件,参数e.data包含server传递过来的数据
- ws.onmessage = function(e){
- console.log(e.data);
- }
- // 当客户端收到服务端发送的关闭连接请求时,触发onclose事件
- ws.onclose = function(e){
- console.log("close");
- }
- // 如果出现连接、处理、接收、发送数据失败的时候触发onerror事件
- ws.onerror = function(e){
- console.log(error);
- }

赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。