Svelte — Socket.io

Svelte, java script platform น้องใหม่มาแรง จะว่าเป็น platform ก็พูดไม่เต็มปากนัก มันเหมือนเป็น compliler เสียมากกว่า ซึ่งเขาเคลมว่า มันเร็วกว่า React และ Vue แถมเขียนง่ายกว่า Vue ด้วย และที่สำคัญเรียนรู้ได้ง่ายกว่า และเร็วกว่า

ซึ่งทาง Svelte ได้แสดงจุดเด่นของ Svelte ไว้อยู่ 3 ข้อดังนี้

1 Write less code: อันนี้เดี๋ยวถ้าได้ลองเขียนเองก็จะรู้ครับว่า code มันน้อยลงจริงๆ น้อยกว่า vue เสียด้วย

2 No virtual dom: Svelte รวบรวมโค้ดของคุณเป็น vanilla JS ขนาดเล็กที่ไม่มีเฟรมเวิร์ก ไม่มี virtual dom

3 Truly reactive: Svelte จะ compile โคดเป็น Ideal javaScript เพราะฉนั้น clilent ไม่จำเป็นต้องโหลดไลบรารีของ plateform เพื่อนำมาจัดการสถานะที่ซับซ้อนอีกต่อไป

เท่าที่สรุปได้ Svelte จะเป็น Server side rendering(SSR) (ส่วนตัวผมว่าคล้าย Next.js ต่างกันที่ Next ใช้ virtual dom) ผมยังมองไม่ออกของข้อดีการที่ไม่มี virtual dom ว่ามันดีกว่ายังไง แต่ก็เถอะ สรุปว่ามันเร็วกว่า React (ยังไม่เห็นผลทดสอบเทียบกับ Next.js) และ Vue ที่สำคัญมันเขียนง่ายกว่ามากๆ

มาเริ่มต้นเลยดีกว่า

npx degit sveltejs/template my-svelte-project
cd my-svelte-project
npm install
npm run dev

รันขึ้นมาแล้วจะได้หน้าตาแบบนี้

โครงสร้างโปรแจค จะประกอบไปด้วย App.svelte และ main.js

svelte จะทำการ compile App.svelte ให้เป็น โคด javaScript วิธีการเขียน จะประกอบไปด้วย 3 ส่วนดังรูปด้านล่างคือ ส่วนของ script ,html และ style

เราสามารถ ดูตัวอย่างการเขียนได้จาก link ด้านล่างนี้ได้เลย ซึ่งเขาทำไว้ได้ดีเลยทีเดียว นี้จึงเป็นเหตุผมว่า ทำไมบทความนี้จึงเน้นไปที่การเขียนเพื่อเรียกใช้ socket.io ทั้งๆที่ผมพึ่งเขียนเกี่ยวกับ svelte เป็นบทแรก

Svelte examples

คราวนี้มาถึงจุดประสงค์ของบทความนี้ คือเขียนเพื่อใช้ socket.io

ก่อนอื่นผมขอเปลี่ยน port นิดหนึ่ง เข้าไปที่ package.json แล้วใส่ port ที่เราต้องการเข้าไป

"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public --no-clear --port 8083"
  },

หลังจากนั้นลง socket.io-client

npm install socket.io-client --save

เริ่มเขียนโคด App.svelte ทำการ import socket.io-client ใน tag <script>

import io from "socket.io-client";
const socket = io("http://localhost:8000")

หลังจากนั้นสร้างตัวแปรขึ้นมาเพื่อใช้งาน

export let name = '';
let yourID = ''
let messages = []
let message = ''

สร้าง function รับส่งข้อมูล

socket.on('sockid', (id) => {
    yourID = id
})
socket.on('message', (data) => {
    messageArr = [...messageArr, data]
})
function sendMessage() {
    socket.emit('data', message)
}

handle function เพื่อรับคำสั่งจาก button และเรียกใช้ function sendMessage()

function handleClick() {
    message = name
    sendMessage()
}

เสร็จแล้วในส่วนของ html ผมจะแสดงผลดังนี้ จากโคดด้านล่าง จะเห็น tag พิเศษ #each ซึ่งเป็น tag พิเศษ ของ svelte ที่เราต้องทำการเรียนรู้ใหม่เช่นเดียวกับ react และ vue

<input bind:value={name} placeholder="enter your name">
<button on:click={handleClick}>Send</button>
<p>Hello {name || 'stranger'}!</p>
<p>Recive messageArr {yourID}</p>
{#each  messageArr as plist,index}  
    <li key={index}>
        {plist}
    </li>
{/each}

เสร็จแล้วในส่วนของ <style> ผมจะไม่ไปทำอะไรกับมัน ปล่อยไว้เช่นเดิม

ในส่วนของ server ผมจะใช้ express แล้วเขียนโคดแบบด้านล่างนี้

const express = require("express");
const config = require("config");
const http = require("http");
const app = express();
const server = http.createServer(app);
const io = require("socket.io")(server, {
    cors: {
      origin: '*',
      methods: ["GET", "POST"]
    }
});
io.on("connection", socket => {
    socket.emit("sockid", socket.id);
    socket.on("data", data => {
        console.log(data)
        io.emit("message", data)
    })
});
const port = process.env.PORT || 8000;
server.listen(port, () => console.log(`Listening on port:${port}...`));

ใครยังใช้ node express ไม่เป็น เชิญ link ด้านล่างนี้เลยครับ

Node.js เริ่มต้นจาก 0

เมื่อ run server และ svelte แล้วผลลัพธ์ที่ได้

เสร็จแล้วครับ ง่ายไหมครับ จะเห็นว่าโคดสั้นมากๆ style การเขียน ก็ดูง่าย สามารถเขียนแบบ component ได้ด้วย svelte กำลังมาแรงเลยครับ community ก็ใหญ่ขึ้นเรื่อยๆ และสาเหตุที่ผมสนใจเจ้าต้องนี้ก็คือ pyscript ก็ใช้ svelte ในการเขียน ด้วยนะครับ

Reference

https://svelte.dev/