기본연결_ socket.io

miin·2022년 4월 21일
0

Library

목록 보기
2/7
//server
const express = require('express');
const app = require('express')();
const server = require('http').createServer(app);

const io = require('socket.io')(server,{
  cors: {
    origin: '*',
    methods: ['GET', 'POST']
  }
})

  //클라에서 받음
//server console에 나타남
  io.on('connection', (socket) => {
    console.log('연결!');
   
    socket.on('rooms', function(data){
      console.log('data:', data) //server console -> data: { post: 'input value' }
      
      //클라로 보내기 
      io.emit('data', data)
    })
  }
  );

//client socket port랑 같아야함
  server.listen(8000)

//client
import {io} from 'socket.io-client';

const socket = io('http://localhost:8000', {transports: ['websocket']})

export default function Home(){
  const [name, setName] = useState('') //input에 입력된 값
    const [list, setList] = useState([]);//input value가 담길 배열

  const handlePost = () => {
    //서버로 보냄
    socket.emit('rooms', {post: name})
  }

  //서버에서 받음
  socket.on('data', (data) => {
    console.log(data) // client console -> { post: 'input value' }
    setList([...list, data])
  });

return(
  <input...생략/>
      {list.map( (p, index) => {
      return(
      <div key={index}>
        <li>
        {p.post}
        </li>
      </div>
      )
    })}
)

0개의 댓글