数码资讯
HTML5的WebSocket的全双工通信的详细解决方案的学习例子
选购提示
关注价格、性能、续航、售后和真实使用场景，理性比较后再下单。
本文主要研究HTML5 WebSocket的用法，这是HTML5最强大的通信功能。它定义了一个全双工通信信道。它只需要一个套接字网络沟通，可以减少不必要的网络流量，减少网络数据delay.html5 WebSockets可以从几千字节减少到两个字节，从150ms到50ms的延迟，和完善
目前，大多数的实时Web应用程序都是围绕轮询和其他服务器端推送技术实现的，其中最著名的是彗星技术，允许服务器以异步方式主动向客户机推送数据。
使用轮询周期，浏览器发送一个HTTP请求，并接收响应；使用长轮询时，浏览器向服务器发送请求，服务器将继续开放一段时间；采用流液，浏览器会发送一个完整的HTTP请求，而服务器将发送和对此保持开放的状态，反应是在开放的状态持续下去的更新。
上述三种方法在发送实时数据时，将涉及HTTP请求和对包头的响应，并且包含大量额外的和不必要的头数据，这将导致传输延迟。
1。HTML5的WebSocket的解释
1、WebSocket握手
为了建立WebSocket通信，客户端和服务器升级HTTP协议WebSocket协议的初始握手期间，一旦连接建立成功，WebSocket消息可以发送回客户端和服务器之间的全双工模式。
注：在网络中，每个消息始于0x00字节0xFF，与端和中间数据是UTF-8编码格式。
2、WebSocket接口
除了对WebSocket协议的定义，一个Javaｓｃｒｉｐｔ应用程序的WebSocket接口定义。
复制代码代码如下所示：
接口的WebSocket {
只读属性domstring URL；
就绪状态
常量无符号短连接＝0；
常量无符号短开= 1；
常量无符号短关闭= 2；
只读属性的无符号短发生；
只读属性的无符号短bufferedamount；
网络
属性功能开放；
属性函数的消息；
属性函数OnClose；
布尔派（DOMSString数据）；
关闭（）；
}；
WebSocket实现目标；
注：WS： / / / / WSS：前缀代表WebSocket连接和安全的WebSocket连接，分别。
二，HTML5的WebSocket API
本节讨论使用HTML5的WebSocket
1。检查浏览器是否支持
的window.websocket用于确定浏览器是否支持。
2，api的基本用法
A. WebSocket对象的创建和WebSocket服务器的连接
复制代码代码如下所示：
url =WS： / /本地：8080 /回声；
WS =新的WebSocket（URL）；
添加事件侦听器
WebSocket遵循异步编程模型。套接字打开后，它只需要等待事件发生，而不主动轮询服务器，因此需要添加回调函数来监视事件。
WebSocket对象有三个事件：打开，关闭，和消息。当连接建立后，打开事件触发和事件触发的消息，收到消息时，和关闭事件被触发时，WebSocket连接关闭。
复制代码代码如下所示：
ws.onopen =函数（）{
日志（打开）；
}
ws.onmessage =函数（）{
日志（e.data）；
}
ws.onclose =函数（）{
日志（）；
}
C.发送消息
当套接字处于打开状态（即调用开放的监控，在调用OnClose监听程序之前），发送的方法可以用来发送消息。
Ws.send（Hello World）；
三、HTML5 WebSocket应用实例
本节将结合地理位置接口的描述，创建一个应用程序，计算距离直接在Web页面。
1。编写HTML文件
复制代码代码如下所示：
HTML5的WebSocket /定位跟踪器
HTML5的WebSocket /定位跟踪器
地理位置：您的浏览器不支持HTML5 Geolocation
WebSocket：您的浏览器不支持HTML5 Web Sockets
2。添加WebSocket代码
复制代码代码如下所示：
功能loaddemo（）{
确保浏览器支持WebSocket / /
如果（窗口。WebSocket）{
url =WS： / /本地：8080 ； / /广播的WebSocket服务器位置
WS =新的WebSocket（URL）；
ws.onopen =函数（）{
updatesocketstatus（连接已建立）；
}
ws.onmessage =功能（e）{
updatesocketestatus（位置更新数据：+返回的数据（e.data））；
}
}
}
三.添加地理位置代码
复制代码代码如下所示：
VaR的地理；
如果（导航定位）{
navigator.geolocation地理=；
updategeolocationstatus（浏览器支持HTML5 Geolocation ）；
}
geo.watchposition（updatelocation，handlelocationerror，{ maximumAge：20000 }）； / /更新一次20s
功能updatelocation（位置）{
VaR的纬度= position.coords.latitude；
var = position.coords.longitude经度；
VAR时间= position.timestamp；
updategeolocationstatus（位置更新时间：+时间戳）；
无功发= json.stringify（{一个纬度，经度}）；
sendmylocation（发送）；
}
4。合并所有内容
复制代码代码如下所示：
HTML5的WebSocket /定位跟踪器
HTML5的WebSocket /定位跟踪器
地理位置：您的浏览器不支持HTML5 Geolocation
WebSocket：您的浏览器不支持HTML5 Web Sockets
参考 / / WebSocket
VaR的WS；
此会话仅生成随机id
一个math.floor VaR =（100000×Math.random（））；
当前显示的行数
VaR的行数；
功能updatesocketstatus（消息）{
document.getelementbyid（socketstatus ）.innerHTML =消息；
}
功能updategeolocationstatus（消息）{
document.getelementbyid（geostatus ）.innerHTML =消息；
}
功能loaddemo（）{
确保浏览器支持WebSocket / /
如果（窗口。WebSocket）{
url =WS： / /本地：8080 ； / /广播的WebSocket服务器位置
WS =新的WebSocket（URL）；
ws.onopen =函数（）{
updatesocketstatus（连接已建立）；
}
ws.onmessage =功能（e）{
updatesocketstatus（位置更新数据：+返回的数据（e.data））；
}
}
VaR的地理；
如果（导航定位）{
navigator.geolocation地理=；
updategeolocationstatus（浏览器支持HTML5 Geolocation ）；
}
geo.watchposition（updatelocation，handlelocationerror，{ maximumAge：20000 }）； / /更新一次20s
功能updatelocation（位置）{
VaR的纬度= position.coords.latitude；
var = position.coords.longitude经度；
VAR时间= position.timestamp；
updategeolocationstatus（位置更新时间：+时间戳）；
无功发= json.stringify（{一个纬度，经度}）；
sendmylocation（发送）；
}
功能sendmylocation（新）{
如果（WS）{
Ws.send（新）
}
}
函数返回的数据（位置）{
VaR数据= JSON.parse（位置）；
无功incomingid =四{ 1 }；
无功incominglat =四{ 2 }；
无功incominglong =四{ 3 }；
无功incomingrow = document.getelementbyid（incomingid）；
如果（！incomingrow）{
incomingrow = document.getelementbyid（div）；
incomingrow.setattribute（身份
incomingrow.usertext =（incomingid = =不存在）我：用户+行数；
行数+ +；
document.body.appendchild（incomingrow）；
}
incomingrow.innerhtml = incomingrow.usertext +叻：+
incominglat + + 朗：
incominglong；
返回incomingrow.usertext；
}
功能handlelocationerror（错误）{
开关（错误代码）{
案例0：
updategeolocationstatus（错误的位置信息检索：+错误信息）；
打破；
案例1：
updategeolocationstatus（防止用户访问位置信息。）；
打破；
案例2：
updategeolocationstatus（浏览器不能检测你的位置信息：+错误信息）；
打破；
案例3：
updategeolocationstatus（浏览器检索位置信息。）；
打破；
}
}
目前，大多数的实时Web应用程序都是围绕轮询和其他服务器端推送技术实现的，其中最著名的是彗星技术，允许服务器以异步方式主动向客户机推送数据。
使用轮询周期，浏览器发送一个HTTP请求，并接收响应；使用长轮询时，浏览器向服务器发送请求，服务器将继续开放一段时间；采用流液，浏览器会发送一个完整的HTTP请求，而服务器将发送和对此保持开放的状态，反应是在开放的状态持续下去的更新。
上述三种方法在发送实时数据时，将涉及HTTP请求和对包头的响应，并且包含大量额外的和不必要的头数据，这将导致传输延迟。
1。HTML5的WebSocket的解释
1、WebSocket握手
为了建立WebSocket通信，客户端和服务器升级HTTP协议WebSocket协议的初始握手期间，一旦连接建立成功，WebSocket消息可以发送回客户端和服务器之间的全双工模式。
注：在网络中，每个消息始于0x00字节0xFF，与端和中间数据是UTF-8编码格式。
2、WebSocket接口
除了对WebSocket协议的定义，一个Javaｓｃｒｉｐｔ应用程序的WebSocket接口定义。
复制代码代码如下所示：
接口的WebSocket {
只读属性domstring URL；
就绪状态
常量无符号短连接＝0；
常量无符号短开= 1；
常量无符号短关闭= 2；
只读属性的无符号短发生；
只读属性的无符号短bufferedamount；
网络
属性功能开放；
属性函数的消息；
属性函数OnClose；
布尔派（DOMSString数据）；
关闭（）；
}；
WebSocket实现目标；
注：WS： / / / / WSS：前缀代表WebSocket连接和安全的WebSocket连接，分别。
二，HTML5的WebSocket API
本节讨论使用HTML5的WebSocket
1。检查浏览器是否支持
的window.websocket用于确定浏览器是否支持。
2，api的基本用法
A. WebSocket对象的创建和WebSocket服务器的连接
复制代码代码如下所示：
url =WS： / /本地：8080 /回声；
WS =新的WebSocket（URL）；
添加事件侦听器
WebSocket遵循异步编程模型。套接字打开后，它只需要等待事件发生，而不主动轮询服务器，因此需要添加回调函数来监视事件。
WebSocket对象有三个事件：打开，关闭，和消息。当连接建立后，打开事件触发和事件触发的消息，收到消息时，和关闭事件被触发时，WebSocket连接关闭。
复制代码代码如下所示：
ws.onopen =函数（）{
日志（打开）；
}
ws.onmessage =函数（）{
日志（e.data）；
}
ws.onclose =函数（）{
日志（）；
}
C.发送消息
当套接字处于打开状态（即调用开放的监控，在调用OnClose监听程序之前），发送的方法可以用来发送消息。
Ws.send（Hello World）；
三、HTML5 WebSocket应用实例
本节将结合地理位置接口的描述，创建一个应用程序，计算距离直接在Web页面。
1。编写HTML文件
复制代码代码如下所示：
HTML5的WebSocket /定位跟踪器
HTML5的WebSocket /定位跟踪器
地理位置：您的浏览器不支持HTML5 Geolocation
WebSocket：您的浏览器不支持HTML5 Web Sockets
2。添加WebSocket代码
复制代码代码如下所示：
功能loaddemo（）{
确保浏览器支持WebSocket / /
如果（窗口。WebSocket）{
url =WS： / /本地：8080 ； / /广播的WebSocket服务器位置
WS =新的WebSocket（URL）；
ws.onopen =函数（）{
updatesocketstatus（连接已建立）；
}
ws.onmessage =功能（e）{
updatesocketestatus（位置更新数据：+返回的数据（e.data））；
}
}
}
三.添加地理位置代码
复制代码代码如下所示：
VaR的地理；
如果（导航定位）{
navigator.geolocation地理=；
updategeolocationstatus（浏览器支持HTML5 Geolocation ）；
}
geo.watchposition（updatelocation，handlelocationerror，{ maximumAge：20000 }）； / /更新一次20s
功能updatelocation（位置）{
VaR的纬度= position.coords.latitude；
var = position.coords.longitude经度；
VAR时间= position.timestamp；
updategeolocationstatus（位置更新时间：+时间戳）；
无功发= json.stringify（{一个纬度，经度}）；
sendmylocation（发送）；
}
4。合并所有内容
复制代码代码如下所示：
HTML5的WebSocket /定位跟踪器
HTML5的WebSocket /定位跟踪器
地理位置：您的浏览器不支持HTML5 Geolocation
WebSocket：您的浏览器不支持HTML5 Web Sockets
参考 / / WebSocket
VaR的WS；
此会话仅生成随机id
一个math.floor VaR =（100000×Math.random（））；
当前显示的行数
VaR的行数；
功能updatesocketstatus（消息）{
document.getelementbyid（socketstatus ）.innerHTML =消息；
}
功能updategeolocationstatus（消息）{
document.getelementbyid（geostatus ）.innerHTML =消息；
}
功能loaddemo（）{
确保浏览器支持WebSocket / /
如果（窗口。WebSocket）{
url =WS： / /本地：8080 ； / /广播的WebSocket服务器位置
WS =新的WebSocket（URL）；
ws.onopen =函数（）{
updatesocketstatus（连接已建立）；
}
ws.onmessage =功能（e）{
updatesocketstatus（位置更新数据：+返回的数据（e.data））；
}
}
VaR的地理；
如果（导航定位）{
navigator.geolocation地理=；
updategeolocationstatus（浏览器支持HTML5 Geolocation ）；
}
geo.watchposition（updatelocation，handlelocationerror，{ maximumAge：20000 }）； / /更新一次20s
功能updatelocation（位置）{
VaR的纬度= position.coords.latitude；
var = position.coords.longitude经度；
VAR时间= position.timestamp；
updategeolocationstatus（位置更新时间：+时间戳）；
无功发= json.stringify（{一个纬度，经度}）；
sendmylocation（发送）；
}
功能sendmylocation（新）{
如果（WS）{
Ws.send（新）
}
}
函数返回的数据（位置）{
VaR数据= JSON.parse（位置）；
无功incomingid =四{ 1 }；
无功incominglat =四{ 2 }；
无功incominglong =四{ 3 }；
无功incomingrow = document.getelementbyid（incomingid）；
如果（！incomingrow）{
incomingrow = document.getelementbyid（div）；
incomingrow.setattribute（身份
incomingrow.usertext =（incomingid = =不存在）我：用户+行数；
行数+ +；
document.body.appendchild（incomingrow）；
}
incomingrow.innerhtml = incomingrow.usertext +叻：+
incominglat + + 朗：
incominglong；
返回incomingrow.usertext；
}
功能handlelocationerror（错误）{
开关（错误代码）{
案例0：
updategeolocationstatus（错误的位置信息检索：+错误信息）；
打破；
案例1：
updategeolocationstatus（防止用户访问位置信息。）；
打破；
案例2：
updategeolocationstatus（浏览器不能检测你的位置信息：+错误信息）；
打破；
案例3：
updategeolocationstatus（浏览器检索位置信息。）；
打破；
}
}
声明：本文内容用于数码产品信息整理与选购参考，具体价格、库存、售后政策以官方渠道和电商页面实时信息为准。