Day01：Build Page(建立页面)

全文同步於个人 Docusaurus Blog

Public(静态资料，存放 Client 端资料)

建立静态页面，并将页面和 terminal 之间建立连线。

首先创建静态资料，结构如下：

folder structure

Server

切到 root 下的 server.js 改写部分内容，透过 use() 这个中介层来挂载刚刚建立的静态资料。

const express = require('express');
const http = require('http');

const PORT = 5000;

const app = express();
const server = http.createServer(app);

app.use(express.static('public'));

// when user go to the website return index.html
app.get('/', (req, res) => {
  res.sendFile(`${__dirname}/public/index.html`);
});

const io = require('socket.io')(server);

server.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

Client

现在开始着手处理 client 端

先在 client.js 埋下 console.log()，并在 index.html 引入 client.js。

// client.js
console.log('this is client');

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Websocket</title>
  </head>
  <body>
    <h3>This is Client Side.</h3>
    <script src="./js/client.js"></script>
  </body>
</html>

现在运行测试一下是否正常。

yarn dev

open localhost:5000

打开本地的浏览器，执行 http://localhost:5000/，可以看到 index.html 的内容被渲染出来，同时打开 F12，也能查看到 client.js 的 console 内容，代表静态资料已被成功挂载到本地的 server 上。

Connection(两端连结)

现在需要将 client 端和 server 端进行串接，这里选择使用 cdn 的方式在 client 端引入。

copy socket.io cdn script

切到 index.html 并贴上 script

  <body>
    <h3>This is Client Side.</h3>
    //...

    <script src="/socket.io/socket.io.js"></script>
    <script src="./js/client.js"></script>
  </body>

进到 client.js，写入以下内容

// listen client
const socket = io('/');

socket.on('connect', (server) => {
  console.log(server)
  console.log(`Client Successfully connected：${socket.id}`);
});

回到 server.js：

// listen & receive client connection
io.on('connection', (socket) => {
  console.log(`Server：${socket.id}`);
});

上面这些动作是透过 socket.io，将前後两端进行连接，并透过 on () 来监听。

现在执行 yarn dev，打开 browser 输入 localhost:5000，查看页面的 console 和 terminal，可以发现两端都拿到同一组 id，代表两者间已经建立起连线。如下图所示：

terminal

terminal socket

HTML

html socket

若我们在 HTML 页面进行重整，也可以看到连线进行刷新，重取新的 id。


<<:  Day 16：「宝藏，都藏在那里了！」- Tailwind JIT 模式

>>:  [Day2]安装VirtualBox及汇入Oracle 11gR2

[Day 1] 总而言之先来个自我介绍

一、自我介绍 & 参赛动机 本人目前该说是研究生呢，还是无业游民呢，反正因为一些私人因素，目...

[Day3]C# 鸡础观念- 核心的数据成员~变数(一)

变数的世界 在C#世界中，基本上大家都希望有自己的归属感，所以他们都会被赋予一个的种族， 这也是所谓...

开机自启动 Seafile

对于运行 systemd 的系统 创建 systemd 服务管理文件，将以下示例中 ${seafil...

[Day5]PHP常量

PHP常量 可以使用 const 关键字或 define() 函数两种方法来定义一个常量。函数 de...

[Day 27] Gitea - 你的Gitea慢了吗？卡卡的？

起源 在某天，一个正在使用gitea的同事告诉我，gitea现在变得好慢喔。 我当下去看gitea的...