🚶♀️ With unlimited power of IFC.js at your fingertips you can now easily view and perform operations on IFC files easily. What about networking? In this tutorial we will learn how to share camera position over Socket.IO and view it in other user's browser.
Express provides us with tooling for HTTP server, it is framework based upon Node.
Socket.IO provides bi-directional communication between a server and client.
👩🏫 For this tutorial, our folder strucutre will be a little different, but if you've been following other tutorials. This will be easy!
index.js file, this file will hold the code for Server Management.
We will create a express app and using that app we will create a server using Socket.IO
We will use this folder to store all the files that will be necessary and will be served to user when they open the browser.
Let's get started by creating a
static folder inside your directory. Add
wasm files and
ifc files into this folder.
We can consider Socket as data forwarder, whenever there is connection made to Server we will send out the camera position to other clients connected on network.
We will get User Initials from a basic form which will be created inside
When user clicks on Connect button a call to
connectToSocket will be made which will create the connection.
Importing and Variables
Once the button is clicked we need to Pass the Initials user has entered with Camera position, Initials will help to visualise the User's camera position as label created using CSS2DRenderer
This code will be a little lengthy but trust us, it is easy!
We will add basic styling for Connection form and Labels that will represent the position
🖥️ Here is an example of everything we've learned today: 🖥️Github repo
🎉🎉🎉 Congrats! Now you know how to use Socket.IO to share the User's Camera position, now you can perform variety of Operations and Share those over network!