The sample

Why write this

In the dead of night, in the wee hours of the morning, I was still working on a bug fix when my Windows computer suddenly jammed. The bug fix and the stuck screen made me so angry that I picked up my phone and opened the AppleStore. I took a look at the MacBoock I bought two years ago. For I was born in a poor family of I bought it is another to his own life, so my mind suddenly appeared a idea, can take own skills learned to generic a desktop demo cloud came out, I can develop the code in this table, you can use the terminal, can listen to music, can write notes, blogging… The most important thing is that I don’t need to care about the environment! Wow, perfect! So because of the money I bowed my head to reality and started my own demo cloud desktop!

The technology stack used

  • Vue3 + Vite + Family bucket
  • webrtc + coturn
  • xterm.js + node-pty
  • vscode-server
  • nestJs + mysql
  • socket
  • docker
  • nginx

What functions do they have?

  • Pure front-end implementation – video callingwebtrc

Webrtc is an open source instant messaging technology from Google. As long as the front end calls the built-in API of the browser, voice and video calls can be realized. I have tried up to four people communicating online at the same time. The main steps are: Pull up the local video stream, fill the stream into the video, create a PeerConnection, collect and save your own iceCandidate, add the local SDP description to the peer during the negotiation, and send the SDP description to the answer end Tell the local device the protocol and route required for communication, and then send ICE information to match the ICE connection connectivity. After receiving the SDP, the answer terminal will exchange its local description and set the received SDP information through setRemoteDescription To local (we call signaling switching); So we set up a WebrTC connection and fill each other’s video box by listening to the remote video stream through OnTrack! Mainly used weBRTC technology and socket technology, the external network also need an Intranet penetration service coturn;

  • Vscode-server Indicates the official website of the vscode-server

A visual studio code running on the web side is basically the same as visual Studio code on the desktop. I use the official Codercom /code-server image. There are also requirements for server configuration around 1.1G

 // Drop the mirror
 docker pull codercom/code-server 
 // Create directory
 mkdir -p ~/.config 
 // Create a container
 docker run -it --name code-server -p 6689:8080 \
  -v "/xxx/.config:/home/coder/.config" \
  -v "/xxx:/home/coder/project" \
  -e PASSWORD="123456" \
  codercom/code-server:latest
 // Access IP plus port 8080 access
Copy the code

Official Mirror Address

Terminal The website address

He is a web browser through socket technology to achieve a small terminal JS library! This is done by instantiating the client using xterm.js

A terminal, send the content of the terminal to the server through the socket (Node service) and then get the input content through node-pTY to execute the input command and then return the command result to the client through the socket, thus forming a web version of the terminal, just started to follow the official website demo because of my Node It was the use of the event form to listen to the socket that resulted in the inability to seamlessly connect with the official xterm-Addon-attach plug-in. After that, it was simply clone the plug-in to make the change, and there was no need to log in the server every time to use the server. You can connect to the server anytime, anywhere, then security, because then you leave your server exposed is also very dangerous, so be careful!!

Website demo

other

There are also some play gadgets are also logical heap came out nothing to introduce, such as song, simple version of the browser, and so on, at present is to build up the shelf on late, he will continue to improve, to build a belongs to own toolbox, as far as possible let oneself happy with what they have learned technology, they want to do, of course also includes many predecessors provide wheel in it Son, also very grateful to the predecessors!

Write in the last

It is very interesting and I love it very much. It not only brings me income, but also allows me to experience the fun brought by technology. Although sometimes bugs make us upset, as long as we calm down, go out for a walk or wash our face, we may have a better solution! My macOS blog address