Web_Advance
  • 本書簡介
  • Node.js 部分
    • Node 版本管理
    • 使用NPM
      • Yarn
    • 開始Node
    • Worker Thread
    • REPL
    • TCP
    • path
    • Cluster and Child_process
    • assert (自訂拋出的錯誤)
    • Stream(流)
    • util (工具類)
    • EventEmitter
    • fs 文件操作
    • Buffer
      • Binary Diff
      • 查看 Binary 檔案內容
    • Process (進程)
    • 錯誤處理
  • OS
  • Async Hook
  • TCP
  • HTTP
    • 有關爬蟲
    • HTTP/2
    • HTTP Protocal
  • HTTPS
    • HTTPS 流程
    • SSL pinning
    • HTTPS 封包解密
    • 建立自簽發 HTTPS 證書
    • 幫網站加上HTTPS
    • HTTPS原理
  • Crypto加密
  • 有關繼承
  • JS 基本
    • JavaScript 迴圈與異步處理
  • 使用 Express
    • 上傳檔案
    • 圖片伺服器
    • 簡單範例
  • 使用 Nest.js
  • 使用MongoDB
    • 設置帳戶登入權限
    • Mongoose 框架
    • 進階Mongo
    • 基本環境操作
    • MongoDB Sharding
  • 使用MySQL
    • Schema 架構設計
    • SQL 語法
    • SQL Procedure
    • Node.js 操作 MySQL
    • 使用 Sequelize
      • DB Migration
      • function
  • 使用PostgreSQL
    • 常見問題
    • replica
    • 基本指令
    • 使用Node.js操控pg
    • SQL 基礎
  • 使用TypeORM
  • RethinkDB
  • CSS 深度探討
    • Width, Height
  • React
    • 第三方組件
      • Formik
    • styled component
    • propTypes
    • React webpack 部署
    • React util
    • 寫component並且publish
    • create-react-app
    • Context API
    • i18n
    • Server side render
    • Next.js教學
    • Higher order component 與 Recompose
    • component 間 互相存取
    • React hook
  • React router
    • 自己寫一個Router
  • Redux
    • Redux Toolkit
    • 小技巧
    • Redux sagas
    • compose
  • React Native
    • adb
    • InApp Billing
    • Icon
    • SVG
    • Firebase
      • Phone Auth
    • 自動化測試
    • Splash screen
    • Websocket
    • Googla OAuth
      • iOS
      • Android
    • Facebook OAuth
      • iOS
      • Android
    • IOS
    • 第三方組件
      • Auth Code Input
      • Country Code Picker
      • onboarding screen
      • Toast
    • ESlint
    • Push notification
    • Android 上架步驟
    • Expo
    • router
      • react-navigation套件
    • 原生組件
      • RefreshControl
      • Modal
      • Alert
      • button
      • KeyboardAvoidingView
      • Drawer
      • Image
    • 限制螢幕垂直與水平
    • NativeBase UI
    • Debug
    • 常見問題
    • Network
    • 硬體操作
      • 隱藏鍵盤
      • 地理位置
      • 相機與圖片庫存取
    • Async Storage
    • Animation
    • Admob
  • JS 模組化
  • 使用 Webpack
  • 使用 Babel
  • JWT Token
  • ES6 ES7 ES8
    • Array method
    • ES8 Async
    • ES6 Proxy
    • ES6 Object
    • ES6 Arrow function
    • ES6 Promise
    • ES6 Symbol
    • ES6 Generator
    • ES6 Set,Map
    • ES6 Class
  • 模板引擎
    • Mustache
    • Handlebars.js
    • EJS
  • ESLint
  • 部屬到OpenShift
  • OpenStack
  • OAuth
    • Twitter OAuth
    • Google authenticator
    • facebook oauth
      • facebook like ,share
    • google oauth
  • Redis
  • 做一個簡單的markdown editor
  • Websocket
    • WebSocket 相關 Protocol
  • Sublime 安裝套件
  • Google api
    • Cloud Run
    • speech api
    • place autocomplete
    • Geocode
    • Map
      • React map
    • vision api
    • Google-recaptcha
    • Google sheet
  • Instagram API
  • Markdown 與 code pretty js
  • HTML5
    • IntersectionObserver
    • HTML5 audio
    • HTML5 Video 與 WebRTC
      • WebRTC 進階
      • WebEX API
    • HTML5 IndexedDB
  • Google Cloud Platform (GCP)
    • Cloud Storage
    • Cloud storage 串接 Cloud CDN
  • Vim 編輯器
  • 使用nginx
    • config
  • Unix 實用指令
    • 新 VPS 安裝流程
    • Ubuntu 22 安裝
    • Shell Script 教學
  • Git 實用指令
    • Git hook
    • 加上 SSH-key 到 GitHub
    • GPG簽名
  • SSH 實用指令
  • 有關Fetch與axios與跨域請求
  • 圖片上傳相關
    • imgur API
  • JS 格式轉換
  • js trick
  • AWS
    • AWS EBS
    • AWS HTTPS 憑證
    • AWS Cloudfront、ELB、ACL
    • AWS Athena
    • AWS CloudWatch、SNS
    • AWS RDS
    • AWS lambda
      • 範例
      • 加上權限控管
    • AWS S3
    • AWS DynamoDB
      • 結合Lambda
    • 快速把 EC2 串上 AWS Cloudfront CDN
    • AWS 證照相關
  • 有關日期Date
  • VS code 編輯器
    • VSCode 外掛 Plugin
  • CI with Gitlab&Jenkins
  • API 測試
    • Postman
      • 設置 Postman 環境變數
    • API Blueprint
    • swagger
      • 註解寫在Code內生成swagger UI
  • Javascript 實用Lib
  • 遠端寫程式
  • Quicktime錄影注意事項
  • Web開發進階Bug
  • Web壓力測試
  • LineBot
  • PM2部署
  • i18n
  • VPN
  • Protocol Buffers
  • Docker教學
    • LXC LXD
    • Docker Compose
    • Docker 原理
    • Docker 指令
  • E2E Testing
    • Cypress
    • PlayWright
    • Puppeteer 與其他 UI 測試工具
  • Unit Test (Jest & enzyme)
    • React Testing Library
    • mocha
  • Cassandra
    • cluster
  • Distribute Web
    • Dat project
    • IPFS project
  • Cluster and Child_process
  • 打包應用程式
  • Java
    • 使用gradle結合docker
  • Debug 頁面
  • Proxy
  • Chrome extension
  • 消息系統
    • RabbitMQ
  • 金流串接
    • Paypal
    • spgateway智富通
    • Stripe 串接
  • 有關Log
  • 設定 feature flag
  • Azure
    • Face API
    • Image Analyze API
    • Azure Serverless
    • Cosmos DB
      • 使用 SDK
      • 以 RESTful 操作 DB
      • 一致性策略與 DB replicate
  • NodeBB 筆記
  • 瀏覽器快取與緩存(Etag, If-None-Match)
  • 瀏覽器快取與緩存(Expires, Last-modified, Cache-Control)
  • Node.js 第三方模組
    • OpenCV
  • Kubernetes
    • 本地測試 MiniKube
  • Ngrok 使用
  • Telegram MiniAPP 開發
  • Firebase 教學
  • 演算法筆記
  • 圖表
    • Echart
    • TradingView 圖表
    • D3
    • 熱力圖 heatmap
  • 後端緩存 Cache
  • 資料一致性
  • Web 安全機制
    • Cookie 與 LocalStorage
  • Vue
    • Element UI
    • Devtool
    • Vuex
    • Vue router
  • 相關網路協議
    • 網路 IP 基礎
    • Google Search 技巧
    • 網路診斷工具
    • IP
    • DNS
  • GitLab 與 Drone
  • SMTP、POP、IMAP
    • SendGrid
  • IPC
  • 串流服務
    • Twilio
    • Agora
  • 其他資源
  • GraphQL
  • Typescript
  • UI 相關資源
  • FFmpeg
  • Unity 遊戲開發筆記
  • Influx DB
  • Windows 相關
  • DALL·E 3
  • Coap
  • Slack API
  • 資訊安全
    • 破解 ZIP 密碼
Powered by GitBook
On this page
  • ws
  • 其他相關框架
  • engine.io
  • socket.io
  • 再複習一次,首先必須先再連線範圍作用域才可做事
  • 最基本兩種
  • 再來是房間部分
  • 簡單範例
  • Socket.io 模組之安全機制
  • ws 模組之安全機制驗證
  • 注意事項
  • ngrok

Was this helpful?

Edit on GitHub

Websocket

簡介

WebSocket一種在單個 TCP 連線上進行全雙工通訊的協定

以前必須要用Ajax間隔時間去跟server要資料,websocket則可以在建立連線後持續傳送

簡單的比喻:

Ajax 喝水要拿起水杯,喝完要再放下
Websocket 用吸管喝水,要喝時或喝太多要退回去杯子都不必再次拿起水杯

webSocket相關框架

ws

https://github.com/websockets/ws

server.js

const WebSocket = require('ws');

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

wss.on('connection', function connection(ws) {
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
  });

  ws.send('something');
});

client.js

const WebSocket = require('ws');
const readline = require('readline');

const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

const ws = new WebSocket('ws://35.190.233.55:3002');

ws.on('open', function open() {
  ws.send('something');
});

rl.on('line', (input) => {
    console.log(`Received: ${input}`);
    ws.send(input);
  });

ws.on('message', function incoming(data) {
  console.log(data);
});

client with server

const WebSocket = require('ws');
const readline = require('readline');

const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout
});

const wss = new WebSocket.Server({ port: 3042 });
const ws = new WebSocket('ws://127.0.0.1:3032');

ws.on('open', function open() {
    ws.send('something');
});

rl.on('line', (input) => {
    console.log(`Received: ${input}`);
    ws.send(input);
});

ws.on('message', function incoming(data) {
    console.log(data);
});

廣播範例:

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });
const connectionList = [];
wss.on('connection', function connection(ws) {
  connectionList.push({
    ws
  })
  ws.on('message', function incoming(message) {
    console.log('received: %s', message);
    connectionList.forEach(connection => {
      connection.ws.send(message);
    })
  });
});

讓同個房間接受廣播

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

const wss = new WebSocket.Server({ port: 8080 });
const connectionList = [];
wss.on('connection', function connection(ws, req) {
  const roomId = req.url.replace('/ws/', '');
  connectionList.push({
    roomId,
    ws
  })
  ws.on('message', function incoming(message) {
    const sameRoomClient = connectionList.filter(connection => {
      return connection.roomId === roomId;
    })
    sameRoomClient.forEach(connection => {
      connection.ws.send(message)
    })
  });
});

app.use('/room/:id', (req, res, next) => {
  return express.static('../public/index.html')(req, res, next);
});

app.listen('8081');

其他相關框架

engine.io

這裡我們使用socket.io當教學範例

socket.io

npm install socket.io --save

之後新增server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Websocket Test</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
    var socket = io();
    </script>
</head>
<body>

</body>
</html>

之後啟動 node server.js

打開瀏覽器localhost:3000,並開啟開發人員工具的network觀察

Connection必須設定Upgrade,表示用戶端希望連線升級。
Upgrade欄位必須設定Websocket,表示希望升級到Websocket協定。
Sec-WebSocket-Key是隨機的字串,伺服器端會用這些資料來構造出一個SHA-1的資訊摘要。把「Sec-WebSocket-Key」加上一個特殊字串「258EAFA5-E914-47DA-95CA-C5AB0DC85B11」,然後計算SHA-1摘要,之後進行BASE-64編碼,將結果做為「Sec-WebSocket-Accept」頭的值,返回給用戶端。如此操作,可以儘量避免普通HTTP請求被誤認為Websocket協定。
Sec-WebSocket-Version 表示支援的Websocket版本。RFC6455要求使用的版本是13,之前草案的版本均應當被棄用。
Origin欄位是可選的,通常用來表示在瀏覽器中發起此Websocket連線所在的頁面,類似於Referer。但是,於Referer不同的是,Origin只包含了協定和主機名稱。
其他一些定義在HTTP協定中的欄位,如Cookie等,也可以在Websocket中使用。

新增一個事件

server.js

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('chat', function(msg){
    console.log('message: ' + msg);
  });
});

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Websocket Test</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      function clickBtn() {
        socket.emit('chat',document.getElementById('thisInput').value);
      }
    </script>
</head>
<body>
   <input id="thisInput"> </input>
   <button onclick="clickBtn()">點我</button> 
</body>
</html>

可看到我們在client端的方框輸入文字後按送出,可於terminal中看到訊息

接著

剛才是讓server接收client發出的事件,現在試著讓client接收server發送的事件

server.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

io.on('connection', function(socket){
  console.log('a user connected');
  socket.on('chat', function(msg){
    console.log('message: ' + msg);
    socket.broadcast.emit('message',msg);//傳給所有人除了自己
    socket.emit('message',msg);//傳給自己
  });
});

http.listen(3000, function(){
  console.log('listening on *:3000');
});

記得更改完server.js後要記得把server重新啟動

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Websocket Test</title>
    <script src="/socket.io/socket.io.js"></script>
    <script>
      var socket = io();
      function clickBtn() {
        socket.emit('chat',document.getElementById('thisInput').value);
      }
      //接收事件
      socket.on('message',function(data) {
        document.getElementById('received').innerHTML = data;
      })
    </script>
</head>
<body>
   <input id="thisInput"> </input>
     <button onclick="clickBtn()">點我</button> 
   <div id="received"></div>
</body>
</html>

注意:socket.broadcast.emit會傳給所有connected user除了自己

這時開啟第二個瀏覽器,並在文字框輸入後按送出,即可看到另一個瀏覽器產生文字

再複習一次,首先必須先再連線範圍作用域才可做事

server.js

io.on('connection',(socket) => {
  利用socket來做事
}

client就是簡單使用on和emit

最基本兩種

分別是socket.on('事件名稱',cb)和socket.emit('事件名稱',cb)

server和client都一樣的用法

socket.broadcast.emit('user connected');給所有連線人廣播

再來是房間部分

socket.join('房間名稱')讓client加入房間

socket.leave('房間名稱')讓client離開房間

socket.broadcast.to('房間名稱').emit('chat',{data: res});給特定房間廣播訊息

簡單範例

server.js

export const socketio = (io, axios, config1) => {

io.on('connection', function(socket){
    console.log('a user connected');

    //房間
    socket.on('mainPage',() => {
        socket.join('mainPage',() => {
          console.log('join main okok')
            socket.leave('chatPage', () => {
                console.log('leave chat');
            })
        });
    })
    socket.on('chatPage',() => {
        socket.join('chatPage',() => {
          console.log('join chat')
            socket.leave('mainPage', () => {
                console.log('leave main')
            });
        });
    })


  //事件
  socket.on('chat',(res) => {
    console.log(res);
    socket.broadcast.to('chatPage').emit('chat',{data: res});
    socket.emit('chat',{data: res})
  })

    socket.on('postArticle', function(){
        axios.get(`${config1.origin}/getArticle`)
            .then(function(response){
                socket.broadcast.to('mainPage').emit('addArticle', response.data);//broadcast傳給所有人除了自己
                socket.emit('addArticle', response.data);//加上傳給自己的socket
         //socket.broadcast.to(id).emit('my message', msg);
            }).
            catch(err => {
                console.log(err);
            })
    });
    socket.on('chat', (data) => {
        console.log(data)
    })
});
}

Socket.io 模組之安全機制

client端

var socket = io.connect('http://localhost:8183/?token=localStorage.getItem('access_token'))

server端

io.on('connection', function(socket) {
    console.log("url"+socket.handshake.url);
    console.log(socket.handshake.query.token);

});

另外client端的cookie會在websocket連線時自動送到server

ws 模組之安全機制驗證

const wss = new WebSocketServer({ server: httpsServer });
httpsServer.on("upgrade", function (request, socket, head) {
  // 用來驗證
  // if (err) {
  //   socket.write("HTTP/1.1 401 Unauthorized\r\n\r\n");
  //   socket.destroy();
  //   return;
  // }
});

注意事項

如果有時更新websocket的code卻發現emit還是只有舊的有反應,則可能是舊的socket連線沒斷開

ngrok

記得要用 https url

./ngrok http https://localhost:8443
Previous做一個簡單的markdown editorNextWebSocket 相關 Protocol

Last updated 4 years ago

Was this helpful?

以下取自維基百科

https://zh.wikipedia.org/wiki/WebSocket
https://github.com/websockets/ws#client-authentication
GitHub - socketio/engine.ioGitHub
Logo