I am a student who learning develop. So I learning node.js with youtube and blog.
But my program isn’t working(No Server error)
This is my directory
This is my HTML file
<!DOCTYPE html>
<html lang="ko">
<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">
<link rel="stylesheet" href="style.css">
<title>BSM CHAT</title>
</head>
<body>
<header id="header">
<div class="header_logo">
<a href="./index.html">
<h1>BSM chat</h1>
<p>Share some information to each others</p>
</a>
</div>
<div class="header_bar">
<ul>
<li><a href="../main.html">INTRO</a></li>
<li><a href="https://bssm.kro.kr/">BSM</a></li>
<li><a href="#">로그인</a></li>
<li><a href="./index.html">채팅</a></li>
<li><a href="https://github.com/">github</a></li>
</ul>
</div>
</header>
<br>
<divS id="section">
<div class="app__wrap">
<div id="info" class="app__info"></div>
<div id="chatWindow" class="app__window"></div>
<div class="app__input__wrap">
<input id="chatInput" type="text" class="app__input" autofocus placeholder="대화를 입력해주세요.">
<button id="chatMessageSendBtn" class="app__button">전송</button>
</div>
</div><br>
</section>
<script src="/js/index.js"></script>
<script src="/socket.io/socket.io.js"></script>
</body>
</html>
This is my index.js file
'use strict';
let socket = io();
let chatWindow = document.getElementById('chatWindow');
let sendButton = document.getElementById('chatMessageSendBtn');
let chatInput = document.getElementById('chatInput');
socket.on('connect', function(){
let name = prompt('대화명을 입력해주세요.', '');
socket.emit('newUserConnect', name);
});
socket.on('updateMessage', function(data){
if(data.name === 'SERVER'){
let info = document.getElementById('info');
info.innerHTML = data.message;
setTimeout(() => {
info.innerText = '';
}, 1000);
}else{
let chatMessageEl = drawChatMessage(data);
chatWindow.appendChild(chatMessageEl);
chatWindow.scrollTop = chatWindow.scrollHeight;
}
});
sendButton.addEventListener('click', function(){
let message = chatInput.value;
if(!message) return false;
socket.emit('sendMessage', {
message
});
chatInput.value = '';
});
function drawChatMessage(data){
let wrap = document.createElement('p');
let message = document.createElement('span');
let name = document.createElement('span');
name.innerText = data.name;
message.innerText = data.message;
name.classList.add('output__user__name');
message.classList.add('output__user__message');
wrap.classList.add('output__user');
wrap.dataset.id = socket.id;
wrap.appendChild(name);
wrap.appendChild(message);
return wrap;
}
This is my app.js file
const express = require('express');
const http = require('http');
const app = express();
const server = http.createServer(app);
const fs = require('fs');
const io = require('socket.io')(server);
const cors = require('cors');
app.use(cors({
origin: '*'
}));
app.use(express.static('src'));
app.get('/', function(req, res){
fs.readFile('./src/index.html', (err, data) => {
if(err) throw err;
res.writeHead(200, {
'Content-Type' : 'text/html'
})
.write(data)
.end();
});
});
io.sockets.on('connection', function(socket){
socket.on('newUserConnect', function(name){
socket.name = name;
io.sockets.emit('updateMessage', {
name : 'SERVER',
message : name + '님이 접속했습니다.'
});
});
socket.on('disconnect', function(){
io.sockets.emit('updateMessage', {
name : 'SERVER',
message : socket.name + '님이 퇴장했습니다.'
});
});
socket.on('sendMessage', function(data){
data.name = socket.name;
io.sockets.emit('updateMessage', data);
});
});
server.listen(8080, function(){
console.log('서버 실행중...');
});
Chatting is not working
Do you know what is the problem?
I try to fix the code and I
expected working well… but Chatting isn’t working