websocket 多实例,
目前大部分实时Web应用都是围绕轮询等服务器端推送技术实现的，其中最著名的就是Comet。Comet技术允许服务器以异步方式主动将数据推送到客户机。
使用轮询时，浏览器定期发送HTTP请求，然后接收响应；使用长轮询时，浏览器向服务器发送请求，服务器会保持打开一段时间；使用流式解决方案时，浏览器会发送一个完整的HTTP请求，但服务器会发送并保持一个开放的响应，这个响应不断更新，无限开放。
以上三种方法在发送实时数据时都涉及到HTTP请求和响应头，包含了大量多余的、不必要的头数据，会造成传输延迟。
一、HTML5 WebSockets解读
1.WebSocket握手
为了建立WebSocket通信，客户端和服务器在初始握手期间将HTTP协议升级为WebSocket协议。一旦成功建立连接，就可以在客户端和服务器之间以全双工模式来回发送WebSocket消息。
注意：在网络中，每个消息以0x00字节开始，以0x 00结束，中间数据以UTF-8格式编码。
2.WebSocket接口
除了WebSocket协议的定义，还定义了JavaScript应用程序的WebSocket接口。复制代码如下：
界面WebSocket{
只读属性DOMString URL
//就绪状态
const无符号短连接=0；
const无符号短开=1；
const无符号short CLOSED=2；
readonly属性无符号短readyState
只读属性unsigned short bufferedAmount
//网络
属性函数onopen
属性函数onmessage
属性函数onclose
布尔发送(在DOMSString数据中)；
void close()；
};
WebSocket实现EventTarget
注意：ws://和wss://前缀分别表示WebSocket连接和安全WebSocket连接。
二。HTML5 WebSockets API
本节讨论如何使用HTML5 WebSockets。
1.检查浏览器是否支持它。
使用窗口。WebSocket来判断浏览器是否支持。
2.API的基本用法
A.WebSocket对象的创建以及与WebSocket服务器的连接
复制代码如下：
URL= ws://localhost:8080/echo ；
ws=新web socket(URL)；
B.添加事件侦听器
WebSocket遵循异步编程模型。打开套接字后，只需要等待事件发生，而不是主动轮询服务器。因此，您需要添加一个回调函数来监控事件。
WebSocket对象有三个事件：打开、关闭和消息。建立连接时触发open事件，收到消息时触发message事件，关闭WebSocket连接时触发close事件。
复制代码如下：
ws.onopen=function(){
日志(“打开”)；
}
ws.onmessage=function(){
日志(电子数据)；
}
ws.onclose=function(){
日志(“已关闭”)；
}
C.发送消息
当套接字处于打开状态时(即调用onopen侦听器之后，调用onclose侦听器之前)，可以使用send方法发送消息。
ws . send( Hello World )；
三。HTML5 WebSockets的应用实例
本节将结合前面提到的地理定位接口来创建一个应用程序，该应用程序直接计算网页中的距离。
1.编写HTML文件
复制代码如下：
！DOCTYPE html/PP html/PP head/PP meta http-equiv= Content-Type Content= text/html；charset=utf-8 /Pp title html 5 web socket/Geolocation Tracker/title/pplinkrel= style href= styles . CSS /Pp/head/ppbodyonload= load demo()/Pp h1 html 5 web socket/Geolocation Tracker/H1/ppdiv Strong Geolocation/Strong:p ID= Geostatus 您的浏览器不支持html 5 Geolocation/p/div/ppdiv Strong web socket/Strong:p ID= socket status 您的浏览器不支持html 5 web
2.添加WebSocket代码
复制代码如下：
函数loadDemo(){
//确保浏览器支持WebSocket
如果(窗口。WebSocket){
URL= ws://localhost:8080 ；//广播WebSocket服务器位置
ws=新web socket(URL)；
ws.onopen=function(){
UpdateSocketStatus(“连接已建立”)；
}
ws.onmessage=function(e){
updateSocketeStatus(更新位置数据：返回的数据(e . data))；
}
}
}
3、添加地理定位代码
复制代码代码如下：
var geo
if(navigator.geolocation){
geo=navigator.geolocation
updateGeolocationStatus(浏览器支持HTML5地理定位);
}/PP地理。观察位置(更新位置，handleLocationError，{最大图像：20000 })；//每20s更新一次/PP功能更新地点(位置){
var纬度=位置。坐标。纬度；
定义变量经度=位置。坐标。经度；
var时间戳=位置。时间戳；
updateGeolocationStatus(位置更新时间：时间戳);
var toSend=JSON.stringify([myId，纬度，经度]);
sendMyLocation(发送)；
}
4、合并所有内容
复制代码代码如下：
！DOCTYPE html/PP html/PP head/PP meta http-equiv= Content-Type Content= text/html；charset=UTF-8 /PP title html 5 web socket/地理定位追踪器/title/PP link rel=样式表 href=样式。CSS /PP/head/PP body onload= load demo()/PP h1 html 5 web socket/Geolocation追踪器/h1/PP divstrongGeolocation/strong:p id= geoStatus 你的浏览器不支持HTML5地理定位/p/div/PP div strong web套接字/strong:p id=套接字状态你的浏览器不支持html 5 Web套接字/p/div/PP/body/PP脚本/PP//Web套接字的引用/PP var ws；/pp //为该会话生成的唯一随机的ID/PP var myId=math。地板(100000 *数学。random())；/pp //当前显示的行数/PP var rowCount；/pp函数updateSocketStatus(message){/PP文档。getelementbyid( socketStatus ).innerHTML=message/pp }/pp函数updateGeolocationStatus(message){/PP文档。getelementbyid(“地理状态”).innerHTML=message/pp }/pp函数loadDemo(){/pp //确保浏览器支持WebSocket/pp if(窗口web socket){/PP URL= ws://localhost:8080 ；//广播WebSocket服务器位置/PP ws=新建web套接字(URL)；/PP ws。on open=function(){/PP updateSocketStatus(连接已建立);/PP }/PP ws。on message=function(e){/PP updateSocketStatus(更新位置数据：返回的数据(e . data))；/PP }/PP }/PP var geo；/PP if(导航器。地理定位){/PP geo=navigator。地理定位；/pp updateGeolocationStatus(浏览器支持HTML5地理定位);/PP }/PP地理。观察位置(更新位置，handleLocationError，{最大图像：20000 })；//每20s更新一次/pp函数更新位置{/PP var latitude=position。坐标。纬度；/PP var经度=位置。坐标。经度；/PP var timestamp=位置。时间戳；/pp updateGeolocationStatus(位置更新时间：时间戳);/PP var to send=JSON。stringify([myId，纬度，经度]);/PP sendMyLocation(要发送)；/pp }/pp函数sendMyLocation(新位置){/PP if(ws){/PP ws。发送(新位置)/PP }/PP函数返回的数据(位置数据){/PP var all data=JSON。解析(位置数据)；/PP var incoming id=所有数据[1]；/PP var incoming lat=所有数据[2]；/PP var incoming long=所有数据[3]；/PP var传入行=文档。getelementbyid(传入id)；/pp如果(!传入行){/PP传入行=文档。getelementbyid( div )；/PP传入行。设置属性( id ，传入id)；/PP传入行。usertext=(传入id==myId)？我:用户行数；/PP rowCount；/PP文档。身体。appendchild(传入行)；/PP }/PP传入行。innerhtml=传入行。user text \ \ Lat:/PP incoming Lat \ \ Lon:/PP incoming long；/PP返回传入行。用户文本；/pp }/pp函数handleLocationError(错误){/pp开关(错误。code){/PP case 0:/ppupdateGeolocationStatus(检索位置信息出错：错误。消息)；/PP破；/pp案例1:/ppupdateGeolocationStatus(用户阻止获取位置信息。);/PP破；/pp案例2:/ppupdateGeolocationStatus(浏览器不能检测你的位置信息：错误。消息)；/PP破；/pp案例3:/ppupdateGeolocationStatus(浏览器检索位置信息超时。);/PP破；/pp }
}/PP/脚本/pp/html
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。