{"id":2350,"date":"2019-09-23T05:25:12","date_gmt":"2019-09-23T05:25:12","guid":{"rendered":"https:\/\/www.migenius.com\/?p=2350"},"modified":"2020-11-02T21:28:20","modified_gmt":"2020-11-02T21:28:20","slug":"new-client-library-for-realityserver","status":"publish","type":"post","link":"https:\/\/www.migenius.com\/articles\/new-client-library-for-realityserver","title":{"rendered":"New Client Library for RealityServer"},"content":{"rendered":"\n

The legacy JavaScript client library shipped with RealityServer was designed in 2010, back when JavaScript in the browser was mostly unusable without some sort of framework like jQuery, WebSockets were still under design and JavaScript on the server was virtually unheard of. A lot has changed since then, JavaScript has significantly evolved and is supported by a huge module ecosystem, WebSockets are under the hood of everything and Node.js is becoming ubiquitous. The RealityServer client library however has barely changed. Until now.<\/p>\n\n\n\n\n\n\n\n

\"\"<\/figure>\n\n\n\n

The New Client Library<\/h3>\n\n\n\n

The new realityserver-client<\/a> is a modern, Promise based, ES6 RealityServer client library that can be used directly both in the browser and Node.js<\/a>. It utilises WebSockets<\/a> for all communications providing fast and efficient command execution. The WebSocket connection can stream images to the client directly from render loops and provides synchronised command execution, ensuring that no changes are lost and letting you know exactly when changes appear in rendered images.<\/p>\n\n\n\n

It is available now and works with RealityServer 5.2 build 2272.266 or later. If you want to work with the source you can get it from GitHub.<\/p>\n\n\n\n

realityserver-client on GitHub<\/a><\/p>\n\n\n\n

It is licensed under the permissive ISC license so you can use it in all of your projects. If you just want to get going and don’t need to review the full source code you can install it directly with npm.<\/p>\n\n\n

\nnpm install @migenius\/realityserver-client\n<\/pre><\/div>\n\n\n
To learn more about how to use the client library as well as how to migrate from older code we have created extensive API documentation.<\/p>\n\n\n\n
realityserver-client API Documentation<\/a><\/p>\n\n\n\n
If you are new to RealityServer we strongly recommend following the Getting Started<\/em> sections which provide a step-by-step guide to using the API in both Node.js and your web browser. The client library is maintained separately to RealityServer itself so star and follow our GitHub repos if you want to keep track of changes and updates.<\/p>\n\n\n\n
RealityServer Extras<\/h3>\n\n\n\n
We have tried to keep the client library as tight as possible, only providing the basic scaffolding for communicating with RealityServer, executing commands, getting data back and working with common data types. However we know there is a lot of functionality many customers want to have when getting started.<\/p>\n\n\n\n
realityserver-extras on GitHub<\/a> \/ realityserver-extras API Documentation<\/a><\/p>\n\n\n\n
The realityserver-extras module adds additional functionality that is frequently requested but doesn’t really fit into the core library. Right now this is mainly our RS.Camera class which provides a client-side camera representation that can be synchronised to the server and has simple functions for doing things like orbiting, dollying and so on. Like the client library you can also install the extras with npm.<\/p>\n\n\n
\nnpm install @migenius\/realityserver-extras\n<\/pre><\/div>\n\n\n
We plan to extend the extras module over time with functionality that we find our customers are frequently implementing over and over again. We’d love feedback<\/a> on what you’d like to see.<\/p>\n\n\n\n
Consistency with Server-side V8 API<\/h3>\n\n\n\n
As most of our users know, we introduced a server-side JavaScript API for writing RealityServer commands back in RealityServer 5.0. This was based on the V8 engine and added modern JavaScript to our server-side. It has proven immensely popular and is now the main way of extending server-side functionality (of course the C++ APIs are still available when needed).<\/p>\n\n\n\n
What was frustrating however was that different types were being used for things like vectors and colours between the old client library and the server-side V8 which made coding both ends a pain. When writing our new library we took the opportunity to fix this and the client-side now offers consistent classes for things like vector math and colour storage.<\/p>\n\n\n\n
We also take advantage of JSON-RPC class hinting to instantiate appropriate classes where possible from server responses on the client side. This removes the need for a lot of boiler plate for extracting values into client-side classes. We think you’ll find working with both APIs now much simpler and more fluid.<\/p>\n\n\n\n
Example Projects<\/h3>\n\n\n\n
To demonstrate the usage of the new client library and extras module we have created several example projects to give you a head start. A simple browser based application, a Node.js application and a modern React<\/a>\/MobX<\/a> based application are available.<\/p>\n\n\n\n
Web Browser<\/h4>\n\n\n\n
realityserver-client-tutorial<\/a><\/p>\n\n\n\n
This is the example you build during the Gettting Started<\/em> section of the realityserver-client API documentation. We recommend building it by following along the API documentation however if you want to check your work this is the completed version. It connects to RealityServer, streams renders and allows for camera movement and material colour change.<\/p>\n\n\n\n
Node.js<\/h4>\n\n\n\n
realityserver-client-node-tutorial<\/a><\/p>\n\n\n\n
Again, this is the example you build in the Getting Started<\/em> section of the API documentations and yes, we do recommend building it step-by-step from there to get a full understanding. This is a great example of how you can automate rendering from Node.js, either for server-side work or just a nice way to script your rendering tasks.<\/p>\n\n\n\n
React\/MobX<\/h4>\n\n\n\n
render-loop-react-mobx<\/a><\/p>\n\n\n\n
This is where things get really interesting. migenius has been building RealityServer applications for customers for many years and the React\/MobX stack is the battle tested solution we now typically deploy when building these applications. This example shows how you can combine the realityserver-client with React and MobX for a truly modern application. There are a lot of advantages, especially in terms of synchronising data between the client and the server. If you are using React in your applications you’ll definitely want to check out this example. While we know MobX is used less than Redux\/Redux-Saga for state management, it is becoming increasing popular and we have found it a great match for RealityServer. We strongly recommend using the approach demonstrated in this example for large scale, modern RealityServer applications. To get a feeling for how far you can take this, checkout a little video of our RealityDesigner application running inside Onshape<\/a>.<\/p>\n\n\n\n
\n