Next.js & Socket.io

บทความนี้เราจะมาทำ ChatApp ด้วย Next.js และ Socket.io กันครับ ฝั่ง server ผมจะใช้ node.js + Express

เริ่มต้นด้วย ฝั่ง Server

mkdir serverExpress
npm init -y
npm install express --save
npm install socket.io --save
npm install config --save
npm install nodemon

สร้าง folder config เสร็จแล้วสร้างไฟล์ default.json ผมจะให้ server รับบน port 8000

{
"port": 8000
}

สร้างไฟล์ index.js

const express = require("express");
const config = require("config");
const http = require("http");
const app = express();
const server = http.createServer(app);
const socketServ = require("socket.io");
const io = socketServ(server);
io.on("connection", socket => {
    socket.emit("your id", socket.id);
    socket.on("send message", body => {
        io.emit("message", body)
    })
})
const port = process.env.PORT || config.port;
server.listen(port, () => console.log(`Listening on port:${port}...`));

เสร็จแล้ว สั้นๆ เลย สั่งรับด้วยคำสั่ง

npx nodemon

ต่อไปเป็นฝั่ง client

npm create next-app clientnext
npm install socket.io-client --save

เปลี่ยนไฟล์ index.js เป็นแบบนี้

import React, {useState} from 'react';
import {io} from 'socket.io-client';
const socket = io("http://localhost:8000",{transports:['websocket']});
export default function Home() {
  const [name,setName] = useState("");
  const [id,setId] = useState("");
  const [message,setMessage] = useState([]);
  const handlepost = (e) =>{
    socket.emit("send message",{post:name});
  };
  
  socket.on("your id",data => {
    setId(data);
  });
  socket.on("message",data => {
    setMessage([...message,data]);
  });
  return (
    <div>
      <input type="text" onChange={(e)=> setName(e.target.value)} /> 
      <button onClick={handlepost}>Send massage </button>
      <p>Recive message {id}</p>
      {message.map((p,index)=>(
        <li key={index}>{p}</li>
      ))}
    </div>
  )
}

ทดสอบการทำงาน

npm run dev

ลองเปิด chrome ทดสอบดูครับ จะเห็นว่าเราพิมพ์อะไรไปอีกฝั่งก็จะเห็นข้อความด้วย ตอนนี้เราสามารถสร้าง ChatApp ได้แล้ว

ในกรณีที่เรานำ socket.io ไปใช้ในงานอื่น โดยส่งข้อมูลไปยัง client แบบเฉพาะเจาะจง ให้เราเข้าไปแก้ที่ฝั่ง server

io.on("connection", socket => {
    socket.emit("your id", socket.id);
    socket.on("send message", data => {
        console.log(data)
        // socket.emit("message", data)
        io.to(socket.id).emit("message", data)
    })
});

Reference

[1]https://www.npmjs.com/package/socket.io
[2]https://socket.io/docs/v3/handling-cors/