[Day 12]-說好的物聯網呢？很重要一定要看！用 Socket.io 建立即時連線～實作篇

第 11 屆 iThome 鐵人賽

DAY 12

IoT

IoT沒那麼難！新手用JavaScript入門做自己的玩具～系列第 12 篇

[Day 12]-說好的物聯網呢？很重要一定要看！用 Socket.io 建立即時連線～實作篇

11th鐵人賽

King Tzeng

團隊Amos的推坑教2.0

2019-09-27 00:56:36

5295 瀏覽

★本系列文章已集結成冊，和系列文不同的是：

本書使用大量的圖解來說明LED系列、多種感測器等原理。

補足系列文程式碼的解說，增加逐行程式碼的詳細解說！

全彩的書籍，用圖解的方式，讓讀者來理解Johnny-Five各種API的功能與效果，讓你不會只讀文字看到想睡覺而學不起來。

歡迎大家做出自己想要的玩具，為了樂趣而學習，讓學習變成你的樂趣！ヽ(・×・´)ゞ
讓Arduino也能用JavaScript創造出屬於自己的作品！

★購書連結-天瓏網路書局：
https://www.tenlong.com.tw/products/9789864345328

《IoT沒那麼難！新手用 JavaScript 入門做自己的玩具！（iT邦幫忙鐵人賽系列書）》
博客來、金石堂、momo、誠品、PChome、讀冊，均有販售喔！─=≡Σ((( つ•̀ω•́)つ
ISBN:9789864345328

前方高能！後端先上！ヽ(・×・´)ゞ

本篇文章續上篇

「[Day 11]-說好的物聯網呢？很重要一定要看！用 Socket.io 建立即時連線～簡介篇」

昨天安裝好套件之後，我們要來測試看看前後端是否都能接收到訊息、通訊順暢～
我們會分成「前端網頁」和「後端伺服器」兩個部分！

Server端－後端部分

先來實作 Server 端 ( ￣□￣)/ <(￣ㄧ￣ ) <(￣ㄧ￣ )

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

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

var server = app.listen(3000);
var sio = io.listen(server);

sio.on('connection', function(socket) {
  socket.emit('eventName', {
    msg: 'Connection Ready！',
  });

  socket.on('user', function(data) {
    console.log('user:' + data.text);
    socket.emit('eventName', {
      msg: '後端收到第' + data.count + '次！',
    });
  });

});

第一部分 引入程式庫

這個不用解釋～（X） (￣ε(#￣)☆

第二部分 連線設定解析

var app = express();
//使用 express 伺服器

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

因為我們把前端程式和後端程式放在不同的目錄下，
express() 的 static() 方法，
可以將某個路徑底下的網頁傳遞給 User 端，能將根目錄導向 static() 裡設定的資料夾！

以現在寫的範例來說，我把 Server 的根目錄指向 "www" 的資料夾中。

var server = app.listen(3000);
// 建立的 Server 使用 3000 port 做通訊

var sio = io.listen(server);

socket.io 連線 express server ，即開啟 socket連線。
這邊也可以簡寫成 var sio = io(server);

最後 Socket 部分，

Socket.io - Event: ‘connect’
https://socket.io/docs/server-api/#Event-%E2%80%98connect%E2%80%99

Socket.io - Socket：socket.emit(eventName[, …args][, ack])
https://socket.io/docs/client-api/#socket-emit-eventName-%E2%80%A6args-ack

sio.on('connection', function(socket) {
//當Socket 與 Client 端每次連線時，觸發 function 動作
});

第11行到第19行

  socket.emit('eventName', {
    msg: 'Connection Ready！',
  });

  socket.on('user', function(data) {
    console.log('user:' + data.text);
    socket.emit('eventName', {
      msg: '後端收到第' + data.count + '次！',
    });

當 Client 端和 Server 端連線後，Server端即透過 socket.emit() 發出自訂事件給 Client 端，並且開始接收 Client 端發出的 User 事件。

圖解事件順序

本魯宅畫了一下 Server 和 Client 的事件是怎樣發生的，希望能幫助理解～
（有錯請大大留言鞭策，感謝感謝～）

~~不知道這樣大家有沒有比較了解一點（才沒有~~
OK~後端這樣大概可以了！

接下來來寫前端的部分吧！(ง๑ •̀_•́)ง

Client 端－前端部分

本魯做了一個簡單的頁面，input 輸入文字後按下 botton 送出 Server 端會即時收到 Client 端的訊息(data)，並且再發送給 User

為了加速製作，本魯 CSS 引用 Bootstrap 框架，JS引用 jQuery 來撰寫

前端頁面長這樣～

html的部分非常簡單 d(･∀･)b

<form>
    <div class="form-group">
        <label for="textInput">輸入文字之後送出！</label>
        <input type="text" class="form-control" id="textInput" placeholder="Enter Text" />
        <small id="" class="form-text text-muted">送出之後去終端機那邊看看～</small>
    </div>
    <button type="button" class="btn btn-primary" id="sendMsg">
        送送送送送～
    </button>
</form>

不要忘了！記得要掛載 socket.io 喔～

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

而 JavaScript 部分

var socket = io.connect();
var i = 1;
socket.on('eventName', function(data) {
    // Client 端接收到由 Server 端接發出的 eventName 事件
    $('#resBackEnd').append(
        '<div class="alert alert-warning" role="alert">' +
        data.msg +
        '</div>',
    );
    console.log(data.msg);
});
$('#sendMsg').on('click', function() {
    inputVal = $('#textInput').val();
    count = i++;
    socket.emit('user', {
        // Client 端 送出 User 事件
        text: inputVal,
        count: count,
    });
});

寫好接收和發送事件之後，我們來執行看看程式結果！