websocket添加请求头(Websocket请求响应模式)
最后更新：2023-12-25 07:05
计算机网络之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”
如何使用WebSocket
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 Cocos2d-x引擎集成libwebsockets，并在libwebsockets的客户端API基础上封装了一层易用的接口，使得引擎在C++, JS, Lua层都能方便的使用WebSocket来进行游戏网络通讯。引擎支持最新的WebSocket Version 13。在C++中使用详细代码可参考引擎目录下的/samples/Cpp/TestCpp/Classes/ExtensionsTest/NetworkTest/WebSocketTest.cpp文件。头文件中的准备工作首先需要include WebSocket的头文件。#include "network/WebSocket.h"cocos2d::network::WebSocket::Delegate定义了使用WebScocket需要监听的回调通知接口。使用WebSocket的类，需要public继承这个Delegate。class WebSocketTestLayer : public cocos2d::Layer, public cocos2d::network::WebSocket::Delegate并Override下面的4个接口：virtual void onOpen(cocos2d::network::WebSocket* ws);virtual void onMessage(cocos2d::network::WebSocket* ws, const cocos2d::network::WebSocket::Data& data);virtual void onClose(cocos2d::network::WebSocket* ws);virtual void onError(cocos2d::network::WebSocket* ws, const cocos2d::network::WebSocket::ErrorCode& error);后面我们再详细介绍每个回调接口的含义。新建WebSocket并初始化WebSocket.org 提供了一个专门用来测试WebSocket的服务器"ws://echo.websocket.org"。 测试代码以链接这个服务器为例，展示如何在Cocos2d-x中使用WebSocket。新建一个WebSocket：cocos2d::network::WebSocket* _wsiSendText = new network::WebSocket();init第一个参数是delegate，设置为this，第二个参数是服务器地址。 URL中的"ws://"标识是WebSocket协议，加密的WebSocket为"wss://"._wsiSendText->init(*this, "ws://echo.websocket.org")WebSocket消息监听在调用send发送消息之前，先来看下4个消息回调。onOpeninit会触发WebSocket链接服务器，如果成功，WebSocket就会调用onOpen，告诉调用者，客户端到服务器的通讯链路已经成功建立，可以收发消息了。void WebSocketTestLayer::onOpen(network::WebSocket* ws){if (ws == _wsiSendText){_sendTextStatus->setString("Send Text WS was opened.");}}onMessagenetwork::WebSocket::Data对象存储客户端接收到的数据， isBinary属性用来判断数据是二进制还是文本，len说明数据长度，bytes指向数据。void WebSocketTestLayer::onMessage(network::WebSocket* ws, const network::WebSocket::Data& data){if (!data.isBinary){_sendTextTimes++;char times[100] = {0};sprintf(times, "%d", _sendTextTimes);std::string textStr = std::string("response text msg: ")+data.bytes+", "+times;log("%s", textStr.c_str());_sendTextStatus->setString(textStr.c_str());}}onClose不管是服务器主动还是被动关闭了WebSocket，客户端将收到这个请求后，需要释放WebSocket内存，并养成良好的习惯：置空指针。void WebSocketTestLayer::onClose(network::WebSocket* ws){if (ws == _wsiSendText){_wsiSendText = NULL;}CC_SAFE_DELETE(ws);}onError客户端发送的请求，如果发生错误，就会收到onError消息，游戏针对不同的错误码，做出相应的处理。void WebSocketTestLayer::onError(network::WebSocket* ws, const network::WebSocket::ErrorCode& error){log("Error was fired, error code: %d", error);if (ws == _wsiSendText){char buf[100] = {0};sprintf(buf, "an error was fired, code: %d", error);_sendTextStatus->setString(buf);}}send消息到服务器在init之后，我们就可以调用send接口，往服务器发送数据请求。send有文本和二进制两中模式。发送文本_wsiSendText->send("Hello WebSocket, I'm a text message.");发送二进制数据(多了一个len参数)_wsiSendBinary->send((unsigned char*)buf, sizeof(buf));主动关闭WebSocket这是让整个流程变得完整的关键步骤, 当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接。close会触发onClose消息，而后onClose里面，我们释放内存。_wsiSendText->close();在Lua中使用详细代码可参考引擎目录下的/samples/Lua/TestLua/Resources/luaScript/ExtensionTest/WebProxyTest.lua文件。创建WebSocket对象脚本接口相对C++要简单很多，没有头文件，创建WebSocket对象使用下面的一行代码搞定。 参数是服务器地址。wsSendText = WebSocket:create("ws://echo.websocket.org")定义并注册消息回调函数回调函数是普通的Lua function，4个消息回调和c++的用途一致，参考上面的说明。local function wsSendTextOpen(strData)sendTextStatus:setString("Send Text WS was opened.")endlocal function wsSendTextMessage(strData)receiveTextTimes= receiveTextTimes + 1local strInfo= "response text msg: "..strData..", "..receiveTextTimessendTextStatus:setString(strInfo)endlocal function wsSendTextClose(strData)print("_wsiSendText websocket instance closed.")sendTextStatus = nilwsSendText = nilendlocal function wsSendTextError(strData)print("sendText Error was fired")endLua的消息注册不同于C++的继承 & Override，有单独的接口registerScriptHandler。 registerScriptHandler第一个参数是回调函数名，第二个参数是回调类型。 每一个WebSocket实例都需要绑定一次。if nil ~= wsSendText thenwsSendText:registerScriptHandler(wsSendTextOpen,cc.WEBSOCKET_OPEN)wsSendText:registerScriptHandler(wsSendTextMessage,cc.WEBSOCKET_MESSAGE)wsSendText:registerScriptHandler(wsSendTextClose,cc.WEBSOCKET_CLOSE)wsSendText:registerScriptHandler(wsSendTextError,cc.WEBSOCKET_ERROR)endsend消息Lua中发送不区分文本或二进制模式，均使用下面的接口。wsSendText:sendString("Hello WebSocket中文, I'm a text message.")主动关闭WebSocket当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接，以释放服务器和客户端的资源。close会触发cc.WEBSOCKET_CLOSE消息。wsSendText:close()在JSB中使用详细代码可参考引擎目录下的/samples/Javascript/Shared/tests/ExtensionsTest/NetworkTest/WebSocketTest.js文件。创建WebSocket对象脚本接口相对C++要简单很多，没有头文件，创建WebSocket对象使用下面的一行代码搞定。 参数是服务器地址。this._wsiSendText = new WebSocket("ws://echo.websocket.org");设置消息回调函数JSB中的回调函数是WebSocket实例的属性，使用匿名函数直接赋值给对应属性。可以看出JS语言的特性，让绑定回调函数更加优美。四个回调的含义，参考上面c++的描述。this._wsiSendText.onopen = function(evt) {self._sendTextStatus.setString("Send Text WS was opened.");};this._wsiSendText.onmessage = function(evt) {self._sendTextTimes++;var textStr = "response text msg: "+evt.data+", "+self._sendTextTimes;cc.log(textStr);self._sendTextStatus.setString(textStr);};this._wsiSendText.onerror = function(evt) {cc.log("sendText Error was fired");};this._wsiSendText.onclose = function(evt) {cc.log("_wsiSendText websocket instance closed.");self._wsiSendText = null;};send消息发送文本，无需转换，代码如下：this._wsiSendText.send("Hello WebSocket中文, I'm a text message.");发送二进制，测试代码中，使用_stringConvertToArray函数来转换string为二进制数据，模拟二进制的发送。 new Uint16Array创建一个16位无符号整数值的类型化数组，内容将初始化为0。然后，循环读取字符串的每一个字符的Unicode编码，并存入Uint16Array，最终得到一个二进制对象。_stringConvertToArray:function (strData) {if (!strData)returnnull;var arrData = new Uint16Array(strData.length);for (var i = 0; i < strData.length; i++) {arrData[i] = strData.charCodeAt(i);}return arrData;},send二进制接口和send文本没有区别，区别在于传入的对象，JS内部自己知道对象是文本还是二进制数据，然后做不同的处理。var buf = "Hello WebSocket中文, I'm a binary message .";var binary = this._stringConvertToArray(buf);this._wsiSendBinary.send(binary.buffer);主动关闭WebSocket当某个WebSocket的通讯不再使用的时候，我们必须手动关闭这个WebSocket与服务器的连接，以释放服务器和客户端的资源。close会触发onclose消息。onExit: function() {if (this._wsiSendText)this._wsiSendText.close(); }
1、以下是创建一个新的WebSocket对象的API： var Socket = new WebSocket(url, [protocal] );这里第一个参数是指要连接的URL，第二个参数是可选的，如果需要的话，则是指定一个的服务器支持的协议。2、WEB Socket例子：
1、以下是创建一个新的WebSocket对象的API： var Socket = new WebSocket(url, [protocal] );这里第一个参数是指要连接的URL，第二个参数是可选的，如果需要的话，则是指定一个的服务器支持的协议。2、WEB Socket例子：
Run WebSocket
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方法无法使用那么只能由你自己的服务器后端取到数据之后返回到前端，具体实现方法不同语言各不相同
如何使用WebSocket
首先要导入webSocket的包，git下载地址https://github.com/square/SocketRocket导入这个包，然后配置环境，导入需要用的框架libicucore.dylib//这个现在Xcode里没有，需要自己找到资源后手动添加CFNetwork.frameworkSecurity.frameworkFoundation.framework。要记得添加pch文件。然后编译，工程运行没有错误，进行下一步在用到的ViewController里包含一下头文件1.2.3.一个测试用的接口ws://echo.websocket.org4.必须实现的代理方法- (void)webSocketDidOpen:(SRWebSocket *)webSocket;- (void)webSocket:(SRWebSocket *)webSocket didFailWithError:(NSError *)error;- (void)webSocket:(SRWebSocket *)webSocket didReceiveMessage:(id)message；- (void)webSocket:(SRWebSocket *)webSocket didCloseWithCode:(NSInteger)code reason:(NSString *)reason wasClean:(BOOL)wasClean;- (void)webSocket:(SRWebSocket *)webSocket didReceivePong:(NSData *)pongPayload;5，在第一个代理方法里发送请求[_webSocket send:@"test success"];在第三个代理方法里打印数据在第四个代理方法里置为nil_webSocket.delegate = nil;完成。
本文由 在线网速测试 整理编辑，转载请注明出处。
