扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >html5中怎么利用websockets实现全双工通信
  • 279

0
分享到

html5中怎么利用websockets实现全双工通信

2024-04-02 19:04:59 279人浏览 安东尼
摘要

本篇文章为大家展示了HTML5中怎么利用websockets实现全双工通信，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。1、WEBSocket握手为了建立WebSo

本篇文章为大家展示了HTML5中怎么利用websockets实现全双工通信，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

1、WEBSocket握手

为了建立WebSocket通信，客户端和服务器在初始握手时，将Http协议升级到WebSocket协议。一旦连接建立成功，就可以在全双工模式下在客户端和服务器之间来回传送WebSocket消息。

注：在网络中，每个消息以0x00字节开头，以0xFF结尾，中间数据采用UTF-8编码格式。

2、WebSocket接口

除了对WebSocket协议的定义之外，还定义了用于javascript应用程序的WebSocket接口。

代码如下:


interface WebSocket{
readonly attribute DOMString URL;
//就绪状态
const unsigned short CONNECTING = 0;
const unsigned short OPEN = 1;
const unsigned short CLOSED = 2;
readonly attribute unsigned short readyState;
readonly attribute unsigned short bufferedAmount;
//网络
attribute Function onopen;
attribute Function onmessage;
attribute Function onclose;
boolean send(in DOMSString data);
void close();
};
WebSocket implements EventTarget;


注意：ws://和wss://前缀分别表示WebSocket连接和安全的WebSocket连接。

二、html5 WebSockets api

本节讨论HTML5 WebSockets的使用方法

1、检测浏览器是否支持

通过window.WebSocket来判断浏览器是否支持。

2、API的基本用法

a. WebSocket对象的创建以及与WebSocket服务器的连接

代码如下:


url = "ws://localhost:8080/echo";
ws = new WebSocket(url);

b. 添加事件监听器

WebSocket遵循异步编程模型，打开socket后，只需等待事件发生，而不需主动向服务器轮询，因此需要添加回调函数来监听事件。

WebSocket对象有三个事件：open、close和message。当连接建立时触发open事件，当收到消息时触发message事件，当WebSocket连接关闭时触发close事件。

代码如下:


ws.onopen = function(){
log("open");
}
ws.onmessage = function(){
log(e.data);
}
ws.onclose = function(){
log("closed");
}

c. 发送消息

当socket处于打开状态（即调用onopen监听程序之后，调用onclose监听程序之前），可以使用send方法发送消息。

ws.send("Hello World");

三、HTML5 WebSockets 应用示例

本节将结合前面讲述的Geolocation接口来创建一个直接在Web页面中计算距离的应用。

1、编写HTML文件

代码如下:


<!DOCTYPE html></p> <p><html></p> <p> <head></p> <p>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p> <p>  <title>HTML5 WebSocket / Geolocation 追踪器</title></p> <p>  <link rel="stylesheet" href="styles.CSS"></p> <p> </head></p> <p> <body onload="loadDemo()"></p> <p>  <h2>HTML5 WebSocket / Geolocation 追踪器</h2></p> <p>  <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div></p> <p>  <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div></p> <p> </body></p> <p></html>

2、添加WebSocket代码

代码如下:


function loadDemo(){
//确保浏览器支持WebSocket
if(window.WebSocket){
 url = "ws://localhost:8080";//broadcast WebSocket服务器位置
 ws = new WebSocket(url);
 ws.onopen = function(){
  updateSocketStatus("连接已建立");
 }
 ws.onmessage = function(e){
  updateSocketeStatus("更新位置数据：" + dataReturned(e.data));
 }
}
}

3、添加Geolocation代码

代码如下:


var geo;
if(navigator.geolocation){
geo = navigator.geolocation;
updateGeolocationStatus("浏览器支持HTML5 Geolocation");
}</p> <p>geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次</p> <p>function updateLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var timestamp = position.timestamp;
updateGeolocationStatus("位置更新时间：" + timestamp);
var toSend = JSON.stringify([myId,latitude,longitude]);
sendMyLocation(toSend);
}

4、合并所有内容

代码如下:


<!DOCTYPE html></p> <p><html></p> <p> <head></p> <p>  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"></p> <p>  <title>HTML5 WebSocket / Geolocation 追踪器</title></p> <p>  <link rel="stylesheet" href="styles.css"></p> <p> </head></p> <p> <body onload="loadDemo()"></p> <p>  <h2>HTML5 WebSocket / Geolocation 追踪器</h2></p> <p>  <div><strong>Geolocation</strong>: <p id="geoStatus">你的浏览器不支持HTML5 Geolocation</p></div></p> <p>  <div><strong>WebSocket</strong>: <p id="socketStatus">你的浏览器不支持HTML5 Web Sockets</p></div></p> <p>  </body></p> <p> <script></p> <p>  //WebSocket的引用</p> <p>  var ws;</p> <p>  //为该会话生成的唯一随机的ID</p> <p>  var myId = Math.floor(100000*Math.random());</p> <p>  //当前显示的行数</p> <p>  var rowCount;</p> <p>  function updateSocketStatus(message){</p> <p>   document.getElementById("socketStatus").innerHTML = message;</p> <p>  }</p> <p>  function updateGeolocationStatus(message){</p> <p>   document.getElementById("geoStatus").innerHTML = message;</p> <p>  }</p> <p>  function loadDemo(){</p> <p>  //确保浏览器支持WebSocket</p> <p>   if(window.WebSocket){</p> <p>    url = "ws://localhost:8080";//broadcast WebSocket服务器位置</p> <p>    ws = new WebSocket(url);</p> <p>    ws.onopen = function(){</p> <p>    updateSocketStatus("连接已建立");</p> <p>   }</p> <p>   ws.onmessage = function(e){</p> <p>    updateSocketStatus("更新位置数据：" + dataReturned(e.data));</p> <p>   }</p> <p>  }</p> <p>  var geo;</p> <p>  if(navigator.geolocation){</p> <p>   geo = navigator.geolocation;</p> <p>   updateGeolocationStatus("浏览器支持HTML5 Geolocation");</p> <p>  }</p> <p>  geo.watchPosition(updateLocation,handleLocationError,{maximumAge:20000});//每20s更新一次</p> <p>  function updateLocation(position){</p> <p>   var latitude = position.coords.latitude;</p> <p>   var longitude = position.coords.longitude;</p> <p>   var timestamp = position.timestamp;</p> <p>   updateGeolocationStatus("位置更新时间：" + timestamp);</p> <p>   var toSend = jsON.stringify([myId,latitude,longitude]);</p> <p>   sendMyLocation(toSend);</p> <p>  }</p> <p>  function sendMyLocation(newLocation){</p> <p>   if(ws){</p> <p>    ws.send(newLocation)</p> <p>   }</p> <p>  }</p> <p>  function dataReturned(locationData){</p> <p>   var allData = JSON.parse(locationData);</p> <p>   var incomingId = allData[1];</p> <p>   var incomingLat = allData[2];</p> <p>   var incomingLong = allData[3];</p> <p>   var incomingRow = document.getElementById(incomingId);</p> <p>   if(!incomingRow){</p> <p>    incomingRow = document.getElementById("div");</p> <p>    incomingRow.setAttribute("id",incomingId);</p> <p>    incomingRow.userText = (incomingId == myId)?"Me":'User' + rowCount;</p> <p>    rowCount++;</p> <p>    document.body.appendChild(incomingRow);</p> <p>   }</p> <p>   incomingRow.innerHTML = incomingRow.userText + " \\ Lat: " +</p> <p>     incomingLat + " \\ Lon: " +</p> <p>     incomingLong;</p> <p>   return incomingRow.userText;</p> <p>  }</p> <p>  function handleLocationError(error){</p> <p>   switch(error.code){</p> <p>    case 0:</p> <p>updateGeolocationStatus("检索位置信息出错: " + error.message);</p> <p>break;</p> <p>    case 1:</p> <p>updateGeolocationStatus("用户阻止获取位置信息。");</p> <p>break;</p> <p>    case 2:</p> <p>updateGeolocationStatus("浏览器不能检测你的位置信息: " + error.message);</p> <p>break;</p> <p>    case 3:</p> <p>updateGeolocationStatus("浏览器检索位置信息超时。");</p> <p>break;</p> <p>   }
 }</p> <p> </script></p> <p></html>

上述内容就是html5中怎么利用websockets实现全双工通信，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网VUE频道。

--结束END--

本文标题: html5中怎么利用websockets实现全双工通信

本文链接: https://lsjlt.com/news/75515.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • html5中怎么利用websockets实现全双工通信
    本篇文章为大家展示了html5中怎么利用websockets实现全双工通信，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。1、WebSocket握手为了建立WebSo...
    99+
    2024-04-02
  • html5的websockets全双工通信示例分析
    本篇内容介绍了“html5的websockets全双工通信示例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有...
    99+
    2024-04-02
  • Android中怎么利用socketpair实现双向通信
    Android中怎么利用socketpair实现双向通信，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。进程：负责读取和分发事件2、应用程序：负责处理输入事件上面这两个进程会...
    99+
    2023-05-30
    socketpair android
  • Silverlight中怎么利用Socket实现通信
    这篇文章将为大家详细讲解有关Silverlight中怎么利用Socket实现通信，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。一.Silverlight的Socket通信和控制台、WinFo...
    99+
    2023-06-17
  • Linux怎么实现TCP双向通信
    这篇文章主要讲解了“Linux怎么实现TCP双向通信”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Linux怎么实现TCP双向通信”吧！双向通信一般指双向交替通信。双向交替通信又称为半双工通...
    99+
    2023-06-28
  • 怎么在python中利用UDP编程实现通信
    今天就跟大家聊聊有关怎么在python中利用UDP编程实现通信，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。python主要应用领域有哪些1、云计算，典型应用OpenStack。2、...
    99+
    2023-06-14
  • 怎么在JavaScript中利用sharedWorker 实现多页面通信
    怎么在JavaScript中利用sharedWorker 实现多页面通信？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。javascript是一种什么语言javascript...
    99+
    2023-06-14
  • winform控件之间双向通信怎么实现
    在WinForms中，可以通过事件和委托来实现控件之间的双向通信。以下是一种常见的实现方式： 定义一个委托类型，用来定义事件处理方...
    99+
    2024-04-02
  • 利用Java怎么样实现网络通信功能
    利用Java怎么样实现网络通信功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。方式一：同步阻塞方式（BIO）：服务器端（Server）：package com.ietree....
    99+
    2023-05-31
    java 网络通信 ava
  • C#中怎么利用 Button实现双击事件
    C#中怎么利用 Button实现双击事件，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。C# Button是有DoubleClick事件的，只是它没有出现在事件列表中，而且....
    99+
    2023-06-17
  • node中怎么利用进程通信实现Cluster共享内存
    node中怎么利用进程通信实现Cluster共享内存，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。##IPC的基本用法：// w...
    99+
    2024-04-02
  • MYSQL INNODB中通用双向链表怎么实现
    这篇文章给大家分享的是有关MYSQL INNODB中通用双向链表怎么实现的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。源码在Ut0lst.h中注意：这里我将链表中的实际的串联的数...
    99+
    2024-04-02
  • html5中怎么利用canvas实现阴影效果
    这篇文章将为大家详细讲解有关html5中怎么利用canvas实现阴影效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。代码如下:<!DOCTYPE h...
    99+
    2024-04-02
  • 怎么利用20行Python代码实现加密通信
    这篇文章主要介绍“怎么利用20行Python代码实现加密通信”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“怎么利用20行Python代码实现加密通信”文章能帮助大家解决问题。一、引言网络上充满了窃听...
    99+
    2023-06-29
  • vue中怎么利用v-model指令实现父子组件通信
    本篇文章给大家分享的是有关vue中怎么利用v-model指令实现父子组件通信，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。vue的双向数据绑定...
    99+
    2024-04-02
  • 怎么在c#中利用委托事件实现多线程通信
    本篇文章为大家展示了怎么在c#中利用委托事件实现多线程通信，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。在研究c# 线程之间通信时，发现传统的方法大概有三种：全局变量，由于同一进程下的多个进程之间共...
    99+
    2023-06-14
  • Android中的多进程通信怎么利用继承Binder类实现
    Android中的多进程通信怎么利用继承Binder类实现？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。服务端代码，BinderService.java：首先继...
    99+
    2023-05-31
    android 多进程 binder
  • Java中怎么实现 Socket通信
    本篇文章为大家展示了Java中怎么实现 Socket通信，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。长连接、短链接只是针对客户端而言，服务器无所谓长、短；无论同步或者异步通信，发送之后务必要又响应...
    99+
    2023-06-17
  • 怎么在Html5中实现微信支付
    本篇文章为大家展示了怎么在Html5中实现微信支付，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。爬坑之路爬坑一：单页SPA和后端路由的问题这个我已经单独做总结：https://www.yisu.co...
    99+
    2023-06-09
  • HTML5中怎么利用postMessage实现Ajax跨域请求
    今天就跟大家聊聊有关HTML5中怎么利用postMessage实现Ajax跨域请求，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。 常规的几...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作