websocket添加请求头(websocket协议头)
最后更新：2023-03-23 23:49:18 手机定位技术交流文章
web前端可视化图表怎么添加数据？
需要调接口吗？不需要的话数据直接写在data里返回出去就好啦，调用接口的话，先定义一个空数组接收数据，返回出去，用prop调用就好
右键编辑图表，进入后就可以进行数据对接了。数据对接目前我们使用两种标准前端页面方法进行数据对接，他们是 Ajax 和 WebSocket ，本章我们将详细介绍这两种方式进行数据对接网页链接Ajax 方式对接Ajax 数据对接Ajax 的本质是通过浏览器的 XMLHttpRequest 对象向服务器发送 HTTP 请求，得到服务器返回的数据后进行数据处理的数据交互方式。对于原生的 Ajax 来说，包括以下几个步骤：创建 XMLHttpRequest 实例；发出 HTTP 请求；接收服务器传回的数据；处理数据，更新页面。在 ThingJS 在线开发环境中，内置了 JQuery 库，可以直接使用 JQurey 封装的 Ajax 方法进行数据对接，例如：$.ajax({'url': "http://3dmmd.cn:83/getMonitorDataById", //Ajax请求服务的地址'type': "GET", //请求方式 "POST" 或 "GET"，默认为 "GET"'dataType': "json", //服务返回的数据类型，推荐使用标准JSON数据格式//发送到服务器的数据'data': { 'id': 89757 },//请求成功后的回调函数'success': function (data) {console.log(data);// 处理返回的数据},//请求失败时调用的函数 有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象'error': function (xhr, status, error) {console.log(xhr);},});关于跨域浏览器出于安全考虑，有同源策略（same-origin policy），所谓“同源”指的是“三个相同”：协议相同；域名相同端口相同对于 ThingJS 在线开发环境所发布的 3D 页面而言，其协议是 https:// ，域名是 www.thingjs.com ，端口是 80 （默认端口可以省略），如果协议、域名或者端口有一个不同就是跨域，Ajax 请求就会失败。在开发工具 Network 中可查看请求情况，下图展示了跨域相关报错:请点击输入图片描述因此，要在 ThingJS 在线环境中请求用户自己服务器上的静态资源数据或数据服务，或者其他网站的数据服务，就需要解决跨域问题。注意事项如果是访问用户上传到 ThingJS 网站的静态 json 数据资源则不存在跨域问题。Ajax 请求跨域解决方案对于在 ThingJS 在线开发环境中开发，我们推荐以下两种方案解决跨域问题：CORS；CORS 是一个 W3C 标准，全称是 “跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出 XMLHttpRequest 请求，从而解决了 Ajax 跨域请求数据的问题。对于前端而言，整个 CORS 通信过程，由浏览器自动完成。对于开发者来说，前端代码与普通 Ajax 代码完全一样。实现 CORS 的关键是后端，需在服务端设置 response 响应头（header）的 Access-Control-Allow-Origin 属性就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源，例如："Access-Control-Allow-Origin", "*" //所有网站都可访问// 仅ThingJS网站能访问// "Access-Control-Allow-Origin","http://www.thingjs.com"如果 CORS 请求不是简单的跨站请求，如：application/x-www-form-urlencoded；text/plain；multipart/form-data；使用GET或POST以外的HTTP请求方法（PUT DELETE等）；请求的Content-Type 不属于以下三种之一：发送了自定义的请求头信息（如Token数据）。那么还需根据实际情况，在服务器的响应头中设置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相关属性值，例如：浏览器 Ajax 请求为：$.ajax({'headers': {"token": '31415926'// 请求头中带上了token数据},'url': "http://localhost:3000/getDataByIds",'type': "POST",//发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded" 但此方式无将复杂的 JSON 组织成键值对形式//因此设置 contentType 为'application/json; charset=utf-8',这种类型是文本类型'contentType': 'application/json; charset=utf-8','dataType': "json",//发送到服务器的数据 由于contentType设置为'application/json; charset=utf-8'，这里需将json对象转为字符串后发送'data': JSON.stringify({ 'ids': [1, 2, 3] }),'success': function (data) {console.log(data);}});则服务端需要设置：//配置允许的请求方式，如果写 * 则都允许"Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS";//配置允许的自定义请求头，如果写 * 则都允许"Access-Control-Allow-Headers", "Content-Type,Token"查看示例JSONPJSONP 的基本原理就是利用 script 标签没有跨域限制的特点，通过 script 标签向服务器请求数据；服务器收到请求后，将数据放在一个指定名字的回调函数里返回给浏览器。注意事项JSONP 仅支持 GET 请求。由于 JQuery 的 Ajax 请求对 JSONP 进行了封装，因此我们可以直接使用相关方法请求 JSONP 数据，例如：$.ajax({type: "get",url: "http://3dmmd.cn:83/monitoringData",data: { "id": 89757},dataType: "jsonp",// 返回的数据类型，设置为JSONP方式//设置回调函数名 JQurey会自动注册该函数jsonpCallback: "myCallbackFun",success: function (d) {console.log(d);// 处理json数据}});上述示例会向浏览器发送一个类似 http://3dmmd.cn:83/monitoringData?id=89757&callback=myCallbackFunc 的请求，服务器通过解析 url 中的 callback 参数，返回如下数据：myCallbackFunc({"state": "success","data": {"id": "89757","temper": "26℃","humi": "42%","power": "9kWh"}})请求成功后 JQuery 会执行 myCallbackFun 函数，从而可以在回调函数中得到并处理 json 数据。注意事项用 JQuery 的 Ajax 方法 发起多个 jsonp 请求时，回调函数名不要重复（即 jsonpCallback 的设置不要重复），否则可能会导致回调函数 undefined ，详见 https://www.cnblogs.com/lenghan/p/5777588.html 。查看示例对于 ThingJS 在线开发环境所发布的 3D 页面而言，其协议是 https:// ，域名是 www.thingjs.com ，端口是 80 （默认端口可以省略），如果协议、域名或者端口有一个不同就是跨域，Ajax 请求就会失败。在开发工具 Network 中可查看请求情况，下图展示了跨域相关报错:请点击输入图片描述因此，要在 ThingJS 在线环境中请求用户自己服务器上的静态资源数据或数据服务，或者其他网站的数据服务，就需要解决跨域问题。注意事项如果是访问用户上传到 ThingJS 网站的静态 json 数据资源则不存在跨域问题。$.ajax({'url': "http://3dmmd.cn:83/getMonitorDataById", //Ajax请求服务的地址'type': "GET", //请求方式 "POST" 或 "GET"，默认为 "GET"'dataType': "json", //服务返回的数据类型，推荐使用标准JSON数据格式//发送到服务器的数据'data': { 'id': 89757 },//请求成功后的回调函数'success': function (data) {console.log(data);// 处理返回的数据},//请求失败时调用的函数 有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象'error': function (xhr, status, error) {console.log(xhr);},});WebSocket对接WebSocket 是 HTML5 一种新的协议，实现了浏览器与服务器之间的全双工通信。其本质是先通过 HTTP/HTTPS 协议进行握手后创建一个用于交换数据的 TCP 连接，服务端与客户端通过此 TCP 连接进行数据的双向实时传输，直到有一方主动发送关闭连接请求或出现网络错误才会关闭连接。WebSocket 最大的优点在，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制，即不存在跨域问题。WebSocket 客户端 API浏览器端的一个简单示例如下：// 创建一个WebSocket连接var webSocket = new WebSocket('ws://3dmmd.cn:82');// 建立 websocket 连接成功 触发open事件webSocket.onopen = function () {console.log("websocket服务器连接成功...");};// 接收服务端数据 触发message事件webSocket.onmessage = function (ev) {console.log("websocket接收到的数据：" + ev.data);};// 关闭连接后 触发close事件webSocket.onclose = function (evt) {console.log("websocket关闭...");};// 通信发生错误时 触发error事件webSocket.onerror = function () {console.log('发生错误')}可通过 readyState 属性值（只读），获取连接状态：0 - 表示连接尚未建立；1 - 表示连接已建立，可以进行通信；2 - 表示连接正在进行关闭3 - 表示连接已经关闭或者连接不能打开当连接成功后，可利用 send() 方法向服务器发送数据，例如：var dataObj = { 'id': 89785 };// send 数据类型可以是 字符串 或 二进制对象（Blob 对象、ArrayBuffer 对象）webSocket.send(JSON.stringify(dataObj));在客户端可调用 close() 方法主动关闭 WebSocket 连接。查看示例WebSocket 服务器端在服务器端，Node.js、Java、.Net、C++ 等语言都有相应的 API 库或框架来实现 WebSocket 的服务端开发。开发者可根据具体的项目需求选择相应方案，这里不再详细说明。
图表 图谱地图关系图 立体图
右键编辑图表，进入后就可以进行数据对接了。数据对接目前我们使用两种标准前端页面方法进行数据对接，他们是 Ajax 和 WebSocket ，本章我们将详细介绍这两种方式进行数据对接网页链接Ajax 方式对接Ajax 数据对接Ajax 的本质是通过浏览器的 XMLHttpRequest 对象向服务器发送 HTTP 请求，得到服务器返回的数据后进行数据处理的数据交互方式。对于原生的 Ajax 来说，包括以下几个步骤：创建 XMLHttpRequest 实例；发出 HTTP 请求；接收服务器传回的数据；处理数据，更新页面。在 ThingJS 在线开发环境中，内置了 JQuery 库，可以直接使用 JQurey 封装的 Ajax 方法进行数据对接，例如：$.ajax({'url': "http://3dmmd.cn:83/getMonitorDataById", //Ajax请求服务的地址'type': "GET", //请求方式 "POST" 或 "GET"，默认为 "GET"'dataType': "json", //服务返回的数据类型，推荐使用标准JSON数据格式//发送到服务器的数据'data': { 'id': 89757 },//请求成功后的回调函数'success': function (data) {console.log(data);// 处理返回的数据},//请求失败时调用的函数 有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象'error': function (xhr, status, error) {console.log(xhr);},});关于跨域浏览器出于安全考虑，有同源策略（same-origin policy），所谓“同源”指的是“三个相同”：协议相同；域名相同端口相同对于 ThingJS 在线开发环境所发布的 3D 页面而言，其协议是 https:// ，域名是 www.thingjs.com ，端口是 80 （默认端口可以省略），如果协议、域名或者端口有一个不同就是跨域，Ajax 请求就会失败。在开发工具 Network 中可查看请求情况，下图展示了跨域相关报错:请点击输入图片描述因此，要在 ThingJS 在线环境中请求用户自己服务器上的静态资源数据或数据服务，或者其他网站的数据服务，就需要解决跨域问题。注意事项如果是访问用户上传到 ThingJS 网站的静态 json 数据资源则不存在跨域问题。Ajax 请求跨域解决方案对于在 ThingJS 在线开发环境中开发，我们推荐以下两种方案解决跨域问题：CORS；CORS 是一个 W3C 标准，全称是 “跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨域的服务器，发出 XMLHttpRequest 请求，从而解决了 Ajax 跨域请求数据的问题。对于前端而言，整个 CORS 通信过程，由浏览器自动完成。对于开发者来说，前端代码与普通 Ajax 代码完全一样。实现 CORS 的关键是后端，需在服务端设置 response 响应头（header）的 Access-Control-Allow-Origin 属性就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源，例如："Access-Control-Allow-Origin", "*" //所有网站都可访问// 仅ThingJS网站能访问// "Access-Control-Allow-Origin","http://www.thingjs.com"如果 CORS 请求不是简单的跨站请求，如：application/x-www-form-urlencoded；text/plain；multipart/form-data；使用GET或POST以外的HTTP请求方法（PUT DELETE等）；请求的Content-Type 不属于以下三种之一：发送了自定义的请求头信息（如Token数据）。那么还需根据实际情况，在服务器的响应头中设置 Access-Control-Allow-Headers 和Access-Control-Allow-Methods 相关属性值，例如：浏览器 Ajax 请求为：$.ajax({'headers': {"token": '31415926'// 请求头中带上了token数据},'url': "http://localhost:3000/getDataByIds",'type': "POST",//发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded" 但此方式无将复杂的 JSON 组织成键值对形式//因此设置 contentType 为'application/json; charset=utf-8',这种类型是文本类型'contentType': 'application/json; charset=utf-8','dataType': "json",//发送到服务器的数据 由于contentType设置为'application/json; charset=utf-8'，这里需将json对象转为字符串后发送'data': JSON.stringify({ 'ids': [1, 2, 3] }),'success': function (data) {console.log(data);}});则服务端需要设置：//配置允许的请求方式，如果写 * 则都允许"Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS";//配置允许的自定义请求头，如果写 * 则都允许"Access-Control-Allow-Headers", "Content-Type,Token"查看示例JSONPJSONP 的基本原理就是利用 script 标签没有跨域限制的特点，通过 script 标签向服务器请求数据；服务器收到请求后，将数据放在一个指定名字的回调函数里返回给浏览器。注意事项JSONP 仅支持 GET 请求。由于 JQuery 的 Ajax 请求对 JSONP 进行了封装，因此我们可以直接使用相关方法请求 JSONP 数据，例如：$.ajax({type: "get",url: "http://3dmmd.cn:83/monitoringData",data: { "id": 89757},dataType: "jsonp",// 返回的数据类型，设置为JSONP方式//设置回调函数名 JQurey会自动注册该函数jsonpCallback: "myCallbackFun",success: function (d) {console.log(d);// 处理json数据}});上述示例会向浏览器发送一个类似 http://3dmmd.cn:83/monitoringData?id=89757&callback=myCallbackFunc 的请求，服务器通过解析 url 中的 callback 参数，返回如下数据：myCallbackFunc({"state": "success","data": {"id": "89757","temper": "26℃","humi": "42%","power": "9kWh"}})请求成功后 JQuery 会执行 myCallbackFun 函数，从而可以在回调函数中得到并处理 json 数据。注意事项用 JQuery 的 Ajax 方法 发起多个 jsonp 请求时，回调函数名不要重复（即 jsonpCallback 的设置不要重复），否则可能会导致回调函数 undefined ，详见 https://www.cnblogs.com/lenghan/p/5777588.html 。查看示例对于 ThingJS 在线开发环境所发布的 3D 页面而言，其协议是 https:// ，域名是 www.thingjs.com ，端口是 80 （默认端口可以省略），如果协议、域名或者端口有一个不同就是跨域，Ajax 请求就会失败。在开发工具 Network 中可查看请求情况，下图展示了跨域相关报错:请点击输入图片描述因此，要在 ThingJS 在线环境中请求用户自己服务器上的静态资源数据或数据服务，或者其他网站的数据服务，就需要解决跨域问题。注意事项如果是访问用户上传到 ThingJS 网站的静态 json 数据资源则不存在跨域问题。$.ajax({'url': "http://3dmmd.cn:83/getMonitorDataById", //Ajax请求服务的地址'type': "GET", //请求方式 "POST" 或 "GET"，默认为 "GET"'dataType': "json", //服务返回的数据类型，推荐使用标准JSON数据格式//发送到服务器的数据'data': { 'id': 89757 },//请求成功后的回调函数'success': function (data) {console.log(data);// 处理返回的数据},//请求失败时调用的函数 有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象'error': function (xhr, status, error) {console.log(xhr);},});WebSocket对接WebSocket 是 HTML5 一种新的协议，实现了浏览器与服务器之间的全双工通信。其本质是先通过 HTTP/HTTPS 协议进行握手后创建一个用于交换数据的 TCP 连接，服务端与客户端通过此 TCP 连接进行数据的双向实时传输，直到有一方主动发送关闭连接请求或出现网络错误才会关闭连接。WebSocket 最大的优点在，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，真正实现了数据的实时双向通信。并且 WebSocket 通信不受同源策略的限制，即不存在跨域问题。WebSocket 客户端 API浏览器端的一个简单示例如下：// 创建一个WebSocket连接var webSocket = new WebSocket('ws://3dmmd.cn:82');// 建立 websocket 连接成功 触发open事件webSocket.onopen = function () {console.log("websocket服务器连接成功...");};// 接收服务端数据 触发message事件webSocket.onmessage = function (ev) {console.log("websocket接收到的数据：" + ev.data);};// 关闭连接后 触发close事件webSocket.onclose = function (evt) {console.log("websocket关闭...");};// 通信发生错误时 触发error事件webSocket.onerror = function () {console.log('发生错误')}可通过 readyState 属性值（只读），获取连接状态：0 - 表示连接尚未建立；1 - 表示连接已建立，可以进行通信；2 - 表示连接正在进行关闭3 - 表示连接已经关闭或者连接不能打开当连接成功后，可利用 send() 方法向服务器发送数据，例如：var dataObj = { 'id': 89785 };// send 数据类型可以是 字符串 或 二进制对象（Blob 对象、ArrayBuffer 对象）webSocket.send(JSON.stringify(dataObj));在客户端可调用 close() 方法主动关闭 WebSocket 连接。查看示例WebSocket 服务器端在服务器端，Node.js、Java、.Net、C++ 等语言都有相应的 API 库或框架来实现 WebSocket 的服务端开发。开发者可根据具体的项目需求选择相应方案，这里不再详细说明。
图表 图谱地图关系图 立体图
怎么跨域获取网页内容，不想使用iframe，也不能让远程服务器配合，也就是使用不了jsonp，该怎么办
先说下跨域的几种方法：jsonp，需要服务器返回jsonp格式服务器代理法，将请求发送本域服务器，由服务器获取内容后返回结果使用window.name方法，不同的标签都能读写window.name的内容跨子域可以两个子域中都将document.domain设置为根域websocket，两个域连接同一个服务器，由服务器控制两个域的信息通信cors请求头跨域，需要在请求头中添加Access-Control-Allow-OriginpostMessage跨域不使用远程服务器配合，理解为对方服务器不可控，1、3、4、5、6、7方法无法使用那么只能由你自己的服务器后端取到数据之后返回到前端，具体实现方法不同语言各不相同
ios 怎么实现websocket 怎么监听心跳
/以下为设置长连接的请求头，以及请求头里面包含的数据 NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL:url cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:10];[request addValue:info1.myToken forHTTPHeaderField:@"token"];[request addValue:info1.imid forHTTPHeaderField:@"imid"];[request addValue:@"hoho" forHTTPHeaderField:@"circleCode"];[request addValue:app_build forHTTPHeaderField:@"build"];[request addValue:app_version forHTTPHeaderField:@"version"];[request addValue:@"ios" forHTTPHeaderField:@"osType"];NSString * str = @"open"; NSData *data = [str dataUsingEn
怎样自定义并使用websocket子协议
由于Websocket协议提供的是一个基于包的可靠传输协议，它并不像HTTP那样是个应用协议，它的包对内容并不像HTTP那样有Content-Type字段去描述，是一个比较底层的协议，就和TCP一样，如果要用来通信通常需要自己来定一个协议。那么subprotocol就可以作为一个标示来让服务端和客户端之间进行协商用。 客户端在进行连接的时候可以声明自己能接受的子协议类型。这和HTTP请求头里带的Accept和Accept-Encoding头字段一样，说明自己可以接受那些类型文件，或者编码，通常是压缩类型Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8Accept-Encoding:gzip, deflate, sdchHTTP的请求里带的这样，向server端说明它能理解哪些类型的数据。 然后和HTTP一样，Server会根据合适的头来返回相应的内容。 然后客户单就知道怎么样去解释响应的数据了。
WebSocket协议是一种网络协议，它实现了浏览器与服务器的双向通讯的设计。
websocket的子协议，定义的时候 var sock = new WebSocket(url,subportocol);第一个参数表示要请求的地址URL，第二个参数（可选的，如果不写就默认是空字符串）字符串或者字符串组成的数组，每个字符串就是一个子协议。服务器返回响应客户端子协议才能建立连接，否则握手失败。如服务端告诉客户端使用str1协议建立连接：请求：Sec-WebSocket-Protocol:str1,str2Sec-WebSocket-Version:13Upgrade:websocket响应:Connection:UpgradeSec-WebSocket-Accept:lWc5qBYvZLWjFVzUOegIyRDnSG0=Sec-Websocket-Protocol:str1 Upgrade:websocket
WebSocket协议是一种网络协议，它实现了浏览器与服务器的双向通讯的设计。
websocket的子协议，定义的时候 var sock = new WebSocket(url,subportocol);第一个参数表示要请求的地址URL，第二个参数（可选的，如果不写就默认是空字符串）字符串或者字符串组成的数组，每个字符串就是一个子协议。服务器返回响应客户端子协议才能建立连接，否则握手失败。如服务端告诉客户端使用str1协议建立连接：请求：Sec-WebSocket-Protocol:str1,str2Sec-WebSocket-Version:13Upgrade:websocket响应:Connection:UpgradeSec-WebSocket-Accept:lWc5qBYvZLWjFVzUOegIyRDnSG0=Sec-Websocket-Protocol:str1 Upgrade:websocket
计算机网络之WebSocket
1.WebSocket 是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。可以在一次特殊的websocket握手后，客户端和浏览器进行双向通信，而http(s）虽然报文头部也可以设置connection为keep-alive不再进行tcp握手，但也只是一个请求对应一个响应，服务器也不能主动向客户端发送数据。 2.与http请求头区别connection:upgradeupgrade:websocket请求头专属：Sec-WebSocket-Key:客户端标识响应头专属：Sec-WebSocket-Accept：服务器标识，以请求标识计算而得Sec-WebSocket-Version：协议版本3.使用4.websocket实例对象属性5.方法1.send方法须在onopen事件之后2.close参数可以设置两个：状态码，描述6.事件1.onopen：一个用于连接打开事件的事件监听器。当readyState的值变为 OPEN 的时候会触发该事件。该事件表明这个连接已经准备好接受和发送数据。这个监听器会接受一个名为"open"的事件对象。2.onmessage：一个用于消息事件的事件监听器，这一事件当有消息到达的时候该事件会触发。这个Listener会被传入一个名为"message"的 MessageEvent 对象。3.onerror：当错误发生时用于监听error事件的事件监听器。会接受一个名为“error”的event对象。4.onclose：用于监听连接关闭事件监听器。当 WebSocket 对象的readyState 状态变为 CLOSED 时会触发该事件。这个监听器会接收一个叫close的 CloseEvent 对象。原文：https://cloud.tencent.com/developer/article/1115496 -——“原 荐 webSocket与ajax、web”
本文由 在线网速测试 整理编辑，转载请注明出处。
