iT邦幫忙

2021 iThome 鐵人賽

DAY 19
0
Modern Web

摸索 WebSocket,遠望 WebRTC系列 第 19

Day18:WS 串接 Client & Server

  • 分享至 

  • xImage
  •  

初始化專案

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');
});

上一篇
Day17:關於 WS 的使用
下一篇
Day19:WS 基本 API
系列文
摸索 WebSocket,遠望 WebRTC30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言