Socket.io를 이용하여 간단한 채팅을 구현해보자.
Server 부분에서는 npm install socket.io를 하도록
1. Client
1-1) Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.socket.io/socket.io-3.0.1.min.js"></script>
<script src="index.js" defer></script>
<title>Document</title>
</head>
<body>
<ul></ul>
<input placeholder="message"/>
<button>Send</button>
</body>
</html>1-2) JS
const socket = io('ws://localhost:8080')
socket.on('message',(text)=>{
const element = document.createElement('li')
element.innerHTML = text
document.querySelector('ul').appendChild(element)
})
document.querySelector('button').addEventListener('click',()=>{
const text = document.querySelector('input').value
socket.emit('message',text)
})2. Server
const http = require('http').createServer()
const port = 8080
const io = require("socket.io")(http,{
cors: {origin:'*'}
})
io.on('connection',(socket)=>{
console.log('user connected')
socket.on('message',(message)=>{
console.log(message)
io.emit('message',`${socket.id.substr(0,2)} said ${message}`)
})
})
http.listen(port,()=>{
console.log('connected')
})