socket.io 채팅 (2)

BirdsOnTree·2022년 9월 8일
0

Javascript

목록 보기
12/17
post-thumbnail

Server

const express = require("express");
const app = express();
const http = require("http");
const {Server} = require("socket.io");
const cors = require("cors");

app.use(cors());

const server = http.createServer(app);

const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"],
  },
});

io.on("connection", (socket) => {
	console.log(`User connected: ${socket.id}`)
  	// 접속할때마다 접속한 사람의 id 가 console된다.
  
  	socket.on("send_message", (data) => {
    	console.log(data.message)
      	// Hello
      	socket.broadcast.emit("receive_message", data)
      // data를 받은것을 emit으로 다시 보내주게 된다.
    })
})

server.listen(3001, () => {
  console.log("SERVER IS RUNNING");
});

Client

import io from "socket.io-client";

const socket = io.connect("http://localhost:3001");

function App() {
  	useEffect(() => {
    	socket.on("receive_message", (data) => {
          	//  on으로 data를 받게 된다.
       		alert(data.message)
          	// 받을곳에서 alert가 뜨게 된다.
        })
    }, [socket])
  
	const sendMessage = () => {
      socket.emit("send_message", {message: "Hello"}
    }
    
return (
	...
	)    
}

0개의 댓글