Deploying WBO online collaboration whiteboard on Linux system

1. Introduction to WBO whiteboard tools

1.1 Introduction to WBO whiteboard

WBO is a free and open source online collaborative whiteboard. It allows multiple users to draw on a large virtual whiteboard simultaneously. The whiteboard is updated in real time for all online users and its status is always maintained. It can be used for many different purposes, including art, entertainment, design, and teaching.

1.2 Features of WBO whiteboard

• To collaborate with someone on a graph in real time, just send them the URL of the whiteboard.

• Everyone can use the public whiteboard.

• Create a private whiteboard with a random name that can only be accessed via its link.

• Create a nameable private whiteboard and customize its URL so that anyone who knows its name can access it.

2. Introduction to local environment

2.1 Local environment planning

This practice is a personal test environment, and the operating system version is centos7.6.

hostname	local P address	Operating system version	Kernel version	node version
jeven	192.168.3.166	centos 7.6	3.10.0-957.el7.x86_64	v16.17.0

2.2 Introduction to this practice

1. The deployment environment for this practice is a personal test environment;
2. WBO online collaboration whiteboard in centos7.6 environment.

3. Check the local environment

3.1 Check local operating system version

Check local operating system version

[root@jeven ~]# cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)

3.2 Check the system kernel version

Check system kernel version

[root@jeven ~]# uname -r
3.10.0-957.el7.x86_64

4. Deploy Node.js environment

4.1 Download the Node.js installation package

In the /root directory, download the Node.js installation package. The downloaded version is v16.17.0.

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

4.2 Unzip the Node.js installation package

In the /root directory, unzip the Node.js installation package

tar -xvJf node-v16.17.0-linux-x64.tar.xz

4.3 Linking binaries

Link the binary files under /root/node-v16.17.0-linux-x64/bin/ to /usr/local/bin

ln -s  /root/node-v16.17.0-linux-x64/bin/node /usr/local/bin/node
ln -s /root/node-v16.17.0-linux-x64/bin/npm /usr/local/bin/npm

4.4 Configure environment variables

• In the /etc/profile file, add the following two lines:

vim /etc/profile

export NODE_HOME=/root/node-v16.17.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/

• Make the variable effective

source /etc/profile

4.5 Check node version

View node version

[root@jeven ~]#  npm -v
8.15.0
[root@jeven ~]# node -v
v16.17.0

5. Download the WBO source code package

5.1 Download WBO source code package

Download WBO source code package from github

git clone https://github.com/lovasoa/whitebophir.git

5.2 View source code directory

View WBO whiteboard tool source code directory

[root@jeven ~]# ls ~/whitebophir/
AUTHORS  client-data         Dockerfile  nightwatch.conf.js  package-lock.json  server       tests
CHECKS   docker-compose.yml  LICENSE     package.json        README.md          server-data

[root@jeven ~]# tree -L 2 ~/whitebophir/
/root/whitebophir/
├── AUTHORS
├── CHECKS
├── client-data
│   ├── apple-touch-icon.png
│   ├── apple-touch-icon-precomposed.png
│   ├── background.png
│   ├── board.css
│   ├── board.html
│   ├── crossdomain.xml
│   ├── error.html
│   ├── favicon.ico
│   ├── favicon.svg
│   ├── frontpage-illustration.svg
│   ├── github.svg
│   ├── icon-size.svg
│   ├── index.css
│   ├── index.html
│   ├── instagram.svg
│   ├── js
│   ├── label.svg
│   ├── manifest.json
│   └── tools
├── docker-compose.yml
├── Dockerfile
├── LICENSE
├── nightwatch.conf.js
├── package.json
├── package-lock.json
├── README.md
├── server
│   ├── boardData.js
│   ├── check_output_directory.js
│   ├── client_configuration.js
│   ├── configuration.js
│   ├── createSVG.js
│   ├── fs_promises.js
│   ├── jwtauth.js
│   ├── jwtBoardnameAuth.js
│   ├── log.js
│   ├── server.js
│   ├── sockets.js
│   ├── templating.js
│   └── translations.json
├── server-data
└── tests
    └── integration.js

6 directories, 40 files

6. Deploy WBO online collaboration whiteboard

6.1 Enter the WBO source code directory

Enter the WBO source code directory

[root@jeven ~]# cd whitebophir/
[root@jeven whitebophir]#

6.2 Set npm mirror source

npm sets domestic Taobao mirror source

npm config set registry https://registry.npmmirror.com

6.3 Install dependencies

Install the dependencies of the WBO project

npm install --production

6.4 Start WBO service

Start WBO service

PORT=5001 HOST=0.0.0.0 npm start

Start WBO service in the background

PORT=5001 HOST=0.0.0.0 npm start & 

6.5 Set up service service

Set WBO as service and use systemctl to manage it.

vim /etc/systemd/system/wbo.service

[Unit]
Description=wbo
After=network.target

[Service]
Type=simple
Environment="PORT=5001" "HOST=0.0.0.0"
ExecStart=/root/node-v16.17.0-linux-x64/bin/npm start
ExecReload=/root/node-v16.17.0-linux-x64/bin/npm restart
ExecStop=/root/node-v16.17.0-linux-x64/bin/npm  stop
WorkingDirectory=/root/whitebophir/
Restart=always
User=root
Group=root
Environment=NODE_ENV=production

[Install]
WantedBy=multi-user.target

Start wbo service

systemctl daemon-reload
systemctl start wbo && systemctl enable  wbo

After restarting the server, check the wbo service status.

[root@jeven ~]# systemctl status wbo
● wbo.service - wbo
   Loaded: loaded (/etc/systemd/system/wbo.service; enabled; vendor preset: disabled)
   Active: active (running) since Sun 2023-10-22 23:25:42 CST; 4min 5s ago
 Main PID: 12292 (npm start)
    Tasks: 23
   Memory: 43.6M
   CGroup: /system.slice/wbo.service
           ├─12292 npm start
           ├─12305 sh /tmp/start-015d97ac.sh
           └─12306 node ./server/server.js

Oct 22 23:25:42 jeven systemd[1]: Started wbo.
Oct 22 23:25:42 jeven npm[12292]: > [email protected] start
Oct 22 23:25:42 jeven npm[12292]: > node ./server/server.js
Oct 22 23:25:42 jeven npm[12292]: server started        {
    
    "port":5001}

6.6 Test WBO service locally

Access http://192.168.3.166:5001 locally and if the wbo web page is returned, the deployment is successful.

[root@jeven ~]# curl http://192.168.3.166:5001 |head
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  6927  100  6927    0     0  5207k      0 --:--:-- --:--:-- --:--:-- 6764k
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WBO — Collaborative whiteboard</title>
    <link rel="stylesheet" href="index.css" />
    <meta name="description" content="A free and open-source online collaborative drawing tool. Sketch new ideas together onWBO!" />
    <meta
      name="keywords"
      content="whiteboard,collaborative,online,draw,paint,shared,realtime,wbo,whitebophir,open-source,GPL,javascript"

6.7 Firewall and selinux settings

• Set up selinux

sed -i 's/SELINUX=enforcing/SELINUX=disabled/' /etc/selinux/config
setenforce 0

• Turn off the firewall. If you want to turn on the firewall, you need to allow port 80.

systemctl stop firewalld && systemctl disable firewalld

7. Access WBO online collaboration whiteboard

6.1 Visit WBO home page

Access address: http://192.168.3.166:5001/, replace the IP address with your own server IP address.

6.2 Create a private whiteboard

Create a nameable private whiteboard and use wbo whiteboard happily.

6.3 Online collaboration

Enter the public whiteboard and perform drawing operations.

Open it on another computer or browser for collaborative drawing.

8. Summary of the use of WBO online collaboration whiteboard

The wbo whiteboard tool currently only supports basic drawing, text and annotation tools, and does not currently support advanced functions such as shapes, charts, etc. In addition, when collaborating, you need to ensure that the network connection is stable, otherwise problems such as lagging or data loss may occur. Overall, wbo is a simple and easy-to-use online whiteboard collaboration tool that is widely used in team collaboration, teaching, brainstorming and other scenarios, and has high application value.