websocket是什么
V-REP 中的 Web Socket 是一种用于在 V-REP 和外部应用程序之间进行通信的协议和技术。Web Socket 基于 TCP 连接,可以提供双向、实时的数据传输,适用于互动性或实时交互性应用。
(比如v-rep在云服务器上运行,通过websocket和用户所使用的web前端通信)
什么是云仿真
就是将v-rep的仿真程序发送到云服务器上,借助云服务器更好的硬件设备更高效地运行v-rep程序,用户可以从云服务器上获取需要的v-rep数据。
使用云仿真是将 V-REP 的仿真环境迁移到云端,让 V-REP 在云服务器上进行运行,用户通过互联网,通过浏览器等远程接入云端的 V-REP环境来完成仿真操作。因此,使用云仿真不需要将 V-REP 的程序发送到云服务器上运行,而是将 V-REP 的仿真环境放到云端进行运行,用户可以通过互联网访问云端的 V-REP 环境,进行仿真任务,而不需要在本地计算机上安装和配置 V-REP 软件。
什么是云端
云端(Cloud)指的是互联网上的远程服务器,也被成为“云服务器”,是封装计算资源的虚拟化环境。云端提供了一个集中式的存储、管理和运行数据和应用程序的平台,用户可以通过互联网访问这些数据和应用程序。
《互联网上用于管理,存储,运行数据的服务器》
websocket在v-rep中的作用
完成云服务器上v-rep仿真和web浏览器之间的通信。
websocket的实现
v-rep内部websocket实现(服务端)
wsRemoteAPI
源码链接
sim = require 'sim'
removeLazyLoaders()wsRemoteApi = {}
//获取wsRemoteApi.verbose这个v-rep全局参数的值,无值返回0
function wsRemoteApi.verbose()return sim.getNamedInt32Param('wsRemoteApi.verbose') or 0
endfunction wsRemoteApi.require(name)_G[name] = require(name)
endfunction wsRemoteApi.info(obj)if type(obj) == 'string' then obj = wsRemoteApi.getField(obj) endif type(obj) ~= 'table' then return obj end
//~= :表示不等于local ret = {}for k, v in pairs(obj) doif type(v) == 'table' thenret[k] = wsRemoteApi.info(v)elseif type(v) == 'function' thenret[k] = {func = {}}elseif type(v) ~= 'function' thenret[k] = {const = v}endendreturn ret
end
/*
该函数接受一个字符串类型的参数 `f`,表示要获取的值的键。在 Lua 语言中,字符串类似于表中的字段名,可以作为表索引来访问对应的值。例如,`_G['print']` 可以获取 Lua 语言中的 `print` 函数。在函数体内部,首先将 `_G` 赋值给变量 `v`,表示从全局变量表开始查找。然后通过 `string.gmatch` 函数循环遍历字符串类型的键 `f` 中所有的单词和下划线,以及它们出现的顺序。在每次循环中,根据单词获取表 `v` 中对应的值,并将其赋值给变量 `v`。如果在遍历的过程中遇到了 `v` 为空(`nil`)的情况,则说明字符串类型的键在 `_G` 全局变量表中不存在,于是返回 `nil`。最后返回变量 `v`,表示找到了对应的值,并将其返回。
*/
//获取key(f)对应的value
function wsRemoteApi.getField(f)local v = _Gfor w in string.gmatch(f, '[%w_]+') dov = v[w]if not v then return nil endendreturn v
endfunction wsRemoteApi.handleRequest(req)if wsRemoteApi.verbose() > 1 then print('request received:', req) endlocal resp = {}resp['id'] = req['id']if req['func'] ~= nil and req['func'] ~= '' thenlocal func = wsRemoteApi.getField(req['func'])local args = req['args'] or {}if not func thenresp['error'] = 'No such function: ' .. req['func']elselocal status, retvals = pcall(function()local ret = {func(unpack(args))}return retend)resp[status and 'ret' or 'error'] = retvalsendelseif req['eval'] ~= nil and req['eval'] ~= '' thenlocal status, retvals = pcall(function()local ret = {loadstring('return ' .. req['eval'])()}return retend)resp[status and 'ret' or 'error'] = retvalsendresp['success'] = resp['error'] == nilif wsRemoteApi.verbose() > 1 then print('returning response:', resp) endreturn resp
endfunction onWSMessage(server, connection, message)local rawReq = message-- if first byte is '{', it *might* be a JSON payloadif rawReq:byte(1) == 123 thenlocal req, ln, err = json.decode(rawReq)if req ~= nil thenlocal resp = wsRemoteApi.handleRequest(req)resp = json.encode(resp)simWS.send(server, connection, resp, simWS.opcode.text)returnendend-- if we are here, it should be a CBOR payloadlocal status, req = pcall(cbor.decode, rawReq)if status thenlocal resp = wsRemoteApi.handleRequest(req)resp = cbor.encode(resp)-- resp=sim.packTable(resp,1)simWS.send(server, connection, resp, simWS.opcode.binary)returnendsim.addLog(sim.verbosity_errors, 'cannot decode message: no suitable decoder')return ''
endfunction wsRemoteApi.publishStepCount()-- if wsRemoteApi.verbose()>1 then-- print('publishing simulationTimeStepCount='..simulationTimeStepCount)-- end
endfunction sysCall_info()return {autoStart = sim.getNamedBoolParam('wsRemoteApi.autoStart') ~= false,menu = 'Connectivity\nWebSocket remote API server',}
endfunction sysCall_init()simWS = require 'simWS'port = sim.getNamedInt32Param('wsRemoteApi.port') or 23050if wsRemoteApi.verbose() > 0 thensim.addLog(sim.verbosity_scriptinfos,string.format('WebSocket Remote API server starting (port=%d)...', port))endjson = require 'dkjson'-- cbor=require 'cbor' -- encodes strings as buffers, always. DO NOT USE!!cbor = require 'org.conman.cbor'wsServer = simWS.start(port)simWS.setMessageHandler(wsServer, 'onWSMessage')if wsRemoteApi.verbose() > 0 thensim.addLog(sim.verbosity_scriptinfos, 'WebSocket Remote API server started')endstepping = false
endfunction sysCall_cleanup()if not simWS then return endif wsServer then simWS.stop(wsServer) endif wsRemoteApi.verbose() > 0 thensim.addLog(sim.verbosity_scriptinfos, 'WebSocket Remote API server stopped')end
endfunction sysCall_addOnScriptSuspend()return {cmd = 'cleanup'}
endfunction sysCall_addOnScriptSuspended()return {cmd = 'cleanup'}
endfunction sysCall_nonSimulation()
endfunction sysCall_beforeMainScript()local outDataif stepping thenoutData = {doNotRunMainScript = not go}go = nilendreturn outData
endfunction sysCall_beforeSimulation()simulationTimeStepCount = 0wsRemoteApi.publishStepCount()
endfunction sysCall_actuation()simulationTimeStepCount = simulationTimeStepCount + 1wsRemoteApi.publishStepCount()
endfunction sysCall_afterSimulation()stepping = false -- auto disable sync. mode
endfunction setStepping(enable)stepping = enablego = nil
endfunction step()go = true
end
wsRemoteAPI中的接口sysCall_init()调用simWS的start接口建立连接。
那么sysCall_init什么时候被执行呢?
v-rep启动的时候就会自动启动连接的监听。
simWS
源码链接
从这个插件的start函数中可以看出,调用start,server端就会listen,然后accept,建立连接。
服务端代码启动流程
1,监听启动
1-1,v-rep启动----调用wsRemoteAPI中的接口sysCall_init(),其中调用simWS的start接口监听,建立连接。
2,事件监听启动
onInstancePass中调用webSocket::server对象的poll接口进行事件监听。
onInstance由v-rep自动调用。
verbose
在 V-REP 中,`wsRemoteApi.verbose()` 函数用于设置或获取远程 API 调用时的日志输出级别。日志输出级别是一个整数值,决定了在进行远程 API 调用时打印哪些日志信息,以便于调试和问题定位。
常见的远程 API 日志输出级别如下:
- 0:不输出任何信息;
- 1:输出仅关键信息,如连接建立和断开等;
- 2:输出详细调用信息,如函数名、参数等;
- 3:输出所有信息,包括调试和错误信息。
浏览器前端websocket实现和接口调用(客户端)
前端怎么打开网页
html双击就会自动使用浏览器打开,浏览器打开就会自动执行html。
(选择Edge浏览器快一些)
客户端代码启动流程
前端页面显示肯定是通过加载html文件,通过解析html文件显示页面的。
前端通过在html中切入js语言,浏览器自动解析并执行。
client端(前端)建立连接只需要两步
1,建立RemoteAPIClient对象;
2,调用RemoteAPIClient中的WebSocketAsPromised对象的open接口发起连接。
前端html中的js建立RemoteAPIClient对象,调用对象open()发起和server的连接,利用这个对象---和服务端建立连接和通信。
<script>const log = (what) => $('#log').append(`${what}\n`);(async () => {var client = new RemoteAPIClient('localhost', 23050, 'json');log('Connecting...');await client.websocket.open();log('Getting proxy object "sim"...');var sim = await client.require('sim');log('Calling sim.getObject("/Floor")...');var [h] = await sim.getObject('/Floor');log(`Result: ${h}`);})();</script>
client端事件发送
RemoteAPIClient对象中的call接口调用WebScoketAsPromised对象的sendRequest接口发送数据,并等待server端执行返回执行结果数据。
RemoteAPIClient
"use strict";const WebSocketAsPromised = require('websocket-as-promised');class RemoteAPIClient {//编解码方式(默认为 'cbor')constructor(host = 'localhost', port = 23050, codec = "cbor", opts = {}) {this.host = host;this.port = port;this.codec = codec;var packMessage;var unpackMessage;/*则使用 CBOR 序列化和反序列化库 `CBOR.encode` 和 `CBOR.decode`进行编解码。`packMessage` 为一个函数,将传入的数据进行 CBOR 编码,并返回编码后的结果。`unpackMessage` 为一个异步函数,将传入的数据进行 CBOR 解码,并返回解码后的结果。如果编解码方式为 `'json'`,则使用 JavaScript 原生的 JSON 序列化和反序列化函数 `JSON.stringify` 和 `JSON.parse` 进行编解码。*/if(this.codec == 'cbor') {//this.websocket.binaryType = "arraybuffer";packMessage = data => CBOR.encode(data);unpackMessage = async data => CBOR.decode(await data.arrayBuffer());} else if(this.codec == "json") {packMessage = data => JSON.stringify(data);unpackMessage = data => JSON.parse(data);}var wsOpts = {packMessage,unpackMessage,// attach requestId to message as `id` fieldattachRequestId: (data, requestId) => Object.assign({id: requestId}, data),// read requestId from message `id` fieldextractRequestId: data => data && data.id,};for(var k in opts)wsOpts[k] = opts[k];this.websocket = new WebSocketAsPromised(`ws://${this.host}:${this.port}`, wsOpts);}
/*
使用 `await` 关键字等待该 Promise 对象执行完成并获取响应结果,保存在变量`reply` 中。在该方法中,使用了 `async` 关键字将 `call` 方法标记为异步函数,使其返回一个 Promise 对象。在调用 `await` 时,控制权会交给引擎,等待 WebSocket 通信的异步操作完成,并返回一个响应结果
*/
//函数调用,传递函数名和参数async call(func, args) {var reply = await this.websocket.sendRequest({func, args});if(reply.success) {return reply.ret;} else {throw reply.error;}}
/*
返回name所对应的值,name可能是一个普通变量,也可能是一个建值对的key,或者其他
js对象
*/async getObject(name) {var r = await this.call('wsRemoteApi.info', [name]);return this.getObject_(name, r[0]);}async require(name) {await this.call('wsRemoteApi.require', [name]);return await this.getObject(name);}getObject_(name, _info) {const client = this;var ret = {}for(let k in _info) {var v = _info[k];if(Object.keys(v).length == 1 && v['func'] !== undefined)ret[k] = async function(...args) {return await client.call(name + "." + k, args);};else if(Object.keys(v).length == 1 && v['const'] !== undefined)ret[k] = v['const'];elseret[k] = this.getObject(name + "." + k, null, null, v);}return ret}
}
WebSocketAsPromised
`WebSocketAsPromised` 是一个第三方 JavaScript 库,用于实现基于 Promise 的 WebSocket 连接。
标准的 WebSocket API 使用回调函数来处理事件,例如在连接建立时调用 `onopen` 回调函数,在收到消息时调用 `onmessage` 回调函数等。而使用 `WebSocketAsPromised` 库可以直接返回 Promise 对象来处理 WebSocket 相关的操作,这种写法更符合现代 JavaScript 中基于 Promise 或 async/await 的编程风格,更易于编写和维护。
在这段代码中,`this.websocket` 保存了一个 `WebSocketAsPromised` 类型的对象,表示当前客户端的 WebSocket 连接。`WebSocketAsPromised` 的构造函数需要传递两个参数:WebSocket 的 URL 和 WebSocket 配置对象。其中,URL 参数表示要连接的 WebSocket 服务器的地址和端口号,`wsOpts` 参数为可选参数对象,用于配置 WebSocket 的一些选项,如超时时间、心跳间隔等。
通过创建基于 Promise 的 `WebSocketAsPromised` 类型的对象,可以使用 `async/await` 等方式来处理 WebSocket 连接的事件处理和错误处理,让代码更加简洁、易读和可维护。
open()函数的作用
用于client对端发起连接,和远程server建立连接。
<script>const log = (what) => $('#log').append(`${what}\n`);(async () => {var client = new RemoteAPIClient('localhost', 23050, 'json');log('Connecting...');await client.websocket.open();log('Getting proxy object "sim"...');var sim = await client.require('sim');log('Calling sim.getObject("/Floor")...');var [h] = await sim.getObject('/Floor');log(`Result: ${h}`);})();</script>
如果open连接失败
如果`open()`连接失败,`open()` 后面的代码不会执行,而是会抛出异常。在这个案例中,如果`await client.websocket.open()`连接失败,控制台会输出一个错误或异常信息,即不会输出"Getting proxy object "sim"..."或"Result: ${h}"。
这是因为`await`关键字会等待异步方法的执行结果,如果异步方法出现错误或异常,则会阻塞当前线程并将错误或异常抛出,因此,如果`open()`连接失败,则异步 `async () => {...}` 函数的执行会被中止,后续的代码也不会执行。
对于上面的代码,如果server端没打开,client端一直处于Connecting
websocketpp
pp---cpp
websocket提供了封装好了client和server从链接建立,数据监听,通信到结束通信的对象和接口。
资料链接
讲解
用户手册
html和js
一般情况下,前端加载 HTML 文件时,其中的 JavaScript 代码就会被自动执行。这是因为 HTML 中的 `<script>` 标签会被浏览器自动解析并执行其中的 JavaScript 代码。
当浏览器解析 HTML 文件时,碰到 `<script>` 标签时会自动执行其中的脚本。如果 `<script>` 标签中带有 `src` 属性,则浏览器会根据该属性的值加载外部 JavaScript 文件,并自动执行其中的代码。如果 `<script>` 标签内部有 JavaScript 代码,则直接执行其中的代码。
需要注意的是,当浏览器加载 JS 文件时,会阻塞 HTML 页面的渲染。如果 JavaScript 代码很长或运行时间很长,可能会导致页面出现卡顿的现象。为了避免这种情况,可以将 JavaScript 代码放到页面底部,在 HTML 元素加载完毕后再执行。另外,也可以使用异步加载技术,如 `<script async src="xxx.js"></script>` 让 JS 文件在后台异步加载,避免阻塞页面渲染。
eg:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>CoppeliaSim remote API client</title></head><body><div id="log" style="white-space: pre"></div><script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/gh/spaceify/cbor-js@master/cbor.js" integrity="sha512-0ABB8mRQj73e8+aaUzonPYnP34/YsUCf6SGUJp/pj5BUXttDonDIvCI7XuC7C27Qem6yRpzIzTlq8kJSlUNjoQ==" crossorigin="anonymous"></script><script src="WebSocketAsPromised.bundle.js"></script><script src="RemoteAPIClient.js"></script><script>const log = (what) => $('#log').append(`${what}\n`);(async () => {var client = new RemoteAPIClient('localhost', 23050, 'json');log('Connecting...');await client.websocket.open();log('Getting proxy object "sim"...');var sim = await client.require('sim');log('Calling sim.getObject("/Floor")...');var [h] = await sim.getObject('/Floor');log(`Result: ${h}`);})();</script></body>
</html>
这是一个基于 JavaScript 的 V-REP 远程 API 客户端示例,用于在网页中通过 JavaScript 调用 V-REP 中的场景对象和函数。
在代码中,首先定义了一个 `log` 函数,用于在页面上输出调试信息。然后使用 `async` 函数和箭头函数等语法定义了一个立即执行的异步函数,其中包含了调用 V-REP 远程 API 的过程。
在异步函数中,首先创建了一个名为 `client` 的 `RemoteAPIClient` 对象,用于与 V-REP 中的远程 API 服务建立连接。其中 `localhost` 表示连接本地计算机,`23050` 表示连接的端口号,`json` 表示使用 JSON-RPC 协议进行通信。
然后使用 `client.require('sim')` 函数获取到远程 API 的命名空间 `sim`,该命名空间包含了 V-REP 中预定义的各种对象和函数。最后使用 `sim.getObject('/Floor')` 函数获取到名为 `/Floor` 的场景对象,将结果保存到变量 `h` 中。
在获取到结果后,调用 `log` 函数将结果输出到页面上。
js调用加载lua模块,调用lua接口实现及原理
最终的实现是通过三方库定义的WebSocketAsPromised接口sendRequest()向服务端发送需要调用的接口和参数,服务端接收到请求之后,会执行需要调用的接口,并返回执行接口返回的内容。
因为我们v-rep中的RemoteAPIClient指定了序列化和反序列化,所以即使调用Lua或者c++接口,反序列化之后就可以变为js所对应的数据。
class RemoteAPIClient {//编解码方式(默认为 'cbor')constructor(host = 'localhost', port = 23050, codec = "cbor", opts = {}) {this.host = host;this.port = port;this.codec = codec;var packMessage;var unpackMessage;/*则使用 CBOR 序列化和反序列化库 `CBOR.encode` 和 `CBOR.decode`进行编解码。`packMessage` 为一个函数,将传入的数据进行 CBOR 编码,并返回编码后的结果。`unpackMessage` 为一个异步函数,将传入的数据进行 CBOR 解码,并返回解码后的结果。如果编解码方式为 `'json'`,则使用 JavaScript 原生的 JSON 序列化和反序列化函数 `JSON.stringify` 和 `JSON.parse` 进行编解码。数据传输格式使用json,无论数据来自lua函数返回还是c++函数返回,JSON.parse都解析为js数据。*/if(this.codec == 'cbor') {//this.websocket.binaryType = "arraybuffer";packMessage = data => CBOR.encode(data);unpackMessage = async data => CBOR.decode(await data.arrayBuffer());} else if(this.codec == "json") {packMessage = data => JSON.stringify(data);unpackMessage = data => JSON.parse(data);}var wsOpts = {packMessage,unpackMessage,// attach requestId to message as `id` fieldattachRequestId: (data, requestId) => Object.assign({id: requestId}, data),// read requestId from message `id` fieldextractRequestId: data => data && data.id,};for(var k in opts)wsOpts[k] = opts[k];this.websocket = new WebSocketAsPromised(`ws://${this.host}:${this.port}`, wsOpts);}
客户端怎么调用接口的
通过html中执行js代码。
方式1:先加载模块,再通过模块加载模块中定义的接口。
插件中的返回值通过js获取
直接在js中定义与调用的函数返回的类型对应的js变量接收返回值即可。
//getInfo返回数组var [info]=await simTest.getInfo();log(`info length: ${info.length}`);for(var i=0;i<info.length;++i){log(`getInfo: ${info[i]}`);}