Day18：WS 串接 Client & Server

初始化专案

ws 在使用上和 socket.io 其实颇为类似，因此预计实作上会分两个阶段，第一阶段就是草稿为主，不考虑样式的部分，仅就功能面看能不能实做出来。第二阶段才会寻找合适的设计导入，不过这大概又是另一个难题了。

专案结构

建立 client 和 server 两个资料夹用於存放两个端点。

同时两端都安装 ws 这个 plugin。

yarn add ws

Server

server-side 使用 require 导入 ws 後，建立 server 端口。

on() 这个语法同样是用来监听。

// server/index.js

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 3000 });

wss.on('connection', function connection(ws) {
  console.log('one client is connected');
});

Client

client-side 的 HTML 使用 live-server 运行後，同样使用 node index.js 去启动 server 端。刷新 HTML 页面，即可看到 terminal 印出 server 的 console.log() 内容。

<!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>Document</title>
  </head>
  <body>
    <h1>This is Client</h1>

    <script>
      const ws = new WebSocket('ws://127.0.0.1:3000');
    </script>
  </body>
</html>

切到 client 底下的 index.js 连结 server-side 建立的 3000 端口

const WebSocket = require('ws');

const ws = new WebSocket('ws://127.0.0.1:3000');

ws.on('open', function () {
  console.log('client is connected to server');
});

<<: 初学者跪着学JavaScript Day19 : 原型毕露(上）

>>: 最短路径问题 (8)