Implantando quadro branco de colaboração on-line WBO no sistema Linux

1. Introdução às ferramentas do quadro branco WBO

1.1 Introdução ao quadro branco WBO

WBO é um quadro branco colaborativo online gratuito e de código aberto. Ele permite que vários usuários desenhem simultaneamente em um grande quadro branco virtual. O quadro branco é atualizado em tempo real para todos os usuários online e seu status é sempre mantido. Ele pode ser usado para diversos fins, incluindo arte, entretenimento, design e ensino.

1.2 Recursos do quadro branco WBO

• Para colaborar com alguém em um gráfico em tempo real, basta enviar a URL do quadro branco.

• Todos podem usar o quadro branco público.

• Crie um quadro branco privado com um nome aleatório que só pode ser acessado através do link.

• Crie um quadro branco privado nomeável e personalize seu URL para que qualquer pessoa que saiba seu nome possa acessá-lo.

2. Introdução ao ambiente local

2.1 Planejamento ambiental local

Esta prática é um ambiente de teste pessoal e a versão do sistema operacional é centos7.6.

nome de anfitrião	endereço P local	Versão do sistema operacional	Versão do kernel	versão do nó
jeven	192.168.3.166	centos 7.6	3.10.0-957.el7.x86_64	v16.17.0

2.2 Introdução a esta prática

1. O ambiente de implantação para esta prática é um ambiente de teste pessoal;
2. Quadro branco de colaboração on-line WBO no ambiente centos7.6.

3. Verifique o ambiente local

3.1 Verifique a versão do sistema operacional local

Verifique a versão do sistema operacional local

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

3.2 Verifique a versão do kernel do sistema

Verifique a versão do kernel do sistema

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

4. Implante o ambiente Node.js.

4.1 Baixe o pacote de instalação do Node.js

No diretório /root, baixe o pacote de instalação do Node.js. A versão baixada é v16.17.0.

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

4.2 Descompacte o pacote de instalação do Node.js

No diretório /root, descompacte o pacote de instalação do Node.js.

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

4.3 Vinculando binários

Vincule os arquivos binários em /root/node-v16.17.0-linux-x64/bin/ a /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 Configurar variáveis ​​de ambiente

• No arquivo /etc/profile, adicione as duas linhas a seguir:

vim /etc/profile

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

• Torne a variável eficaz

source /etc/profile

4.5 Verifique a versão do nó

Ver versão do nó

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

5. Baixe o pacote de código-fonte WBO

5.1 Baixe o pacote de código-fonte WBO

Baixe o pacote de código-fonte WBO do github

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

5.2 Ver diretório do código-fonte

Visualizar o diretório do código-fonte da ferramenta de quadro branco WBO

[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. Implante o quadro branco de colaboração on-line WBO

6.1 Insira o diretório do código-fonte WBO

Digite o diretório do código-fonte WBO

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

6.2 Definir fonte de espelho npm

npm define fonte de espelho doméstico Taobao

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

6.3 Instalar dependências

Instale as dependências do projeto WBO

npm install --production

6.4 Iniciar serviço WBO

Iniciar serviço WBO

PORT=5001 HOST=0.0.0.0 npm start

Inicie o serviço WBO em segundo plano

PORT=5001 HOST=0.0.0.0 npm start & 

6.5 Configurar serviço de serviço

Defina WBO como serviço e use systemctl para gerenciá-lo.

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

Iniciar serviço wbo

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

Após reiniciar o servidor, verifique o status do serviço wbo.

[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 Teste o serviço WBO localmente

Acesse http://192.168.3.166:5001 localmente e se a página da web wbo for retornada, a implantação será bem-sucedida.

[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 Configurações de firewall e selinux

• Configurar o selinux

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

• Desligue o firewall. Se quiser ativar o firewall, você precisa permitir a porta 80.

systemctl stop firewalld && systemctl disable firewalld

7. Acesse o quadro branco de colaboração on-line da WBO

6.1 Visite a página inicial da WBO

Endereço de acesso: http://192.168.3.166:5001/, substitua o endereço IP pelo endereço IP do seu próprio servidor.

6.2 Crie um quadro branco privado

Crie um quadro branco privado nomeável e use o quadro branco wbo com alegria.

6.3 Colaboração on-line

Entre no quadro branco público e execute operações de desenho.

Abra-o em outro computador ou navegador para desenho colaborativo.

8. Resumo do uso do quadro branco de colaboração on-line WBO

A ferramenta de quadro branco wbo atualmente oferece suporte apenas a ferramentas básicas de desenho, texto e anotação e não oferece suporte a funções avançadas, como formas, gráficos, etc. Além disso, ao colaborar, você precisa garantir que a conexão de rede esteja estável, caso contrário, poderão ocorrer problemas como atraso ou perda de dados. No geral, wbo é uma ferramenta de colaboração de quadro branco online simples e fácil de usar, amplamente utilizada em colaboração em equipe, ensino, brainstorming e outros cenários, e tem alto valor de aplicação.