Day00：Setting up Environment(环境设定)

全文同步於个人 Docusaurus Blog

Foreword

过往前後端沟通，需要仰赖 client 端发起请求，譬如 GET or POST，但这对 server 端来说，却无法主动回传。但当我使用 socket 後，只需要透过一次握手(采用 ws 协议，而非 http 协议)，前後端就能建立持久性的双向连接(full-duplex)，达到数据传输的目的，同时 server 端也能主动更新讯息给 client 端。

实作 socket 的作法，目前市场上主流应该是以下两者：

1. socket.io
2. websocket

前者是 Node.js 老牌实作 websocket 的服务器，因此兼容性良好，如果有考虑冷门浏览器的话，会是首选。後者则是 HTML5 新增的特性，因此在使用上，有可能会无法兼容冷门浏览器。

Require

• Node.js
• Visual Studio Code(任一编辑器)

第一项需要准备 Node.js 环境，推荐使用 NVM 来安装管理 Node 版本方便切换，可参考这篇文章 NVM，至於编辑器则看个人习惯即可。

Build

建立基础环境

mkdir chat

cd chat

# init project, use npm or yarn

yarn init

plugin

安装 express 来建立 server，同时使用老牌的 socket.io 来实作。

yarn add express socket.io 

touch file

开始着手建立 js 档案来写写看

touch server.js

# package.json 的 main 改为 server.js

Running Server

在 server.js 写入以下内容来建立本地的 server

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

const Port = 5000;

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

切换到终端机，执行以下指令，确认 server 已经被建立，印出 console

node server.js

但如果每次都需要执行 node server.js 颇麻烦，所以这边安装一个 plugin nodemon，让它帮我 auto reload。

yarn add nodemon -D

同时我在 package.json 建立 scripts:

"scripts": {
  "dev": "nodemon server.js"
},

此後，我只需要执行 yarn dev，就可以达到想要自动更新 server 的目的，现在测试看看是否可行。

# start server
yarn dev

接着回到 server.js，将 port 改为 5001，检查终端机，确定正常同步更新，代表没问题了。