✉ 채팅 앱 만드는 방법 ✉
안녕하세요, 채팅 앱을 만드는 방법에 대한 튜토리얼입니다.
여기입니다 @Leroy01010
시작하자
1. 도서관
사용자에서 사용자로 연결하려면 socket.io가 필요합니다.
그리고 익스프레스 서버와 http도 필요합니다.
암호:
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
2. Socket.io 연결
웹 소켓 연결을 위해서는 몇 줄의 코드가 필요합니다.
첫 번째 코드 블록은 사용자 이름(채팅 앱용)이고 다음을 전송합니다. '사용자 이름이 채팅에 참여했습니다...'
두 번째 코드 블록은 첫 번째 블록과 반대입니다.
코드의 세 번째 블록은 메시지에 관한 것으로 사용자가 메시지를 보낼 때 사용자 이름과 메시지 날짜가 포함된 메시지를 보냅니다.
네 번째 코드 블록(websocket 연결 외부)은 포트 수신 처리기입니다.
암호:
io.sockets.on('connection', (socket) => {
socket.on('username', function(username) {
socket.username = username;
io.emit('is_online', '🔵 <i>' + socket.username + ' joined the chat..</i>');
});
socket.on('disconnect', (username) => {
io.emit('is_online', '🔴 <i>' + socket.username + ' lefted the chat..</i>');
});
socket.on('chat_message', (message) => {
let time = new Date();
io.emit('chat_message',`<i>${time.toLocaleTimeString()}</i><br>` + '<strong>' + socket.username + '</strong>: ' + message);
});
});
// Server listen handler
server.listen(8080, ()=>{
console.log('Connected!');
});
4. 채팅용 HTML 파일을 렌더링합니다.
소켓 연결 전에 몇 줄을 추가해야 합니다.
HTML 채팅 앱 파일을 렌더링합니다.
암호:
app.get('/', function(req, res) {
res.sendFile(__dirname + "/index.html");
});
5. index.html에 코드를 채워 채팅 앱을 만듭니다.
채팅을 위한 양식을 만들기 위해 jQuery를 사용해야 합니다.
암호:
<!DOCTYPE html>
<html>
<head>
<title>Chatorzo</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #fff; padding: 3px; position: fixed; bottom: 0; width: 100%; border-color: #000; border-top-style: solid; border-top-width: 1px;}
form input { border-style: solid; border-width: 1px; padding: 10px; width: 85%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; margin-left: 2%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="../../socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body style="background: grey;">
<header align="center">
<h1>Chatorzo</h1>
</header>
<br>
<br>
<br>
<ul id="messages"></ul>
<form action="/" method="POST" id="chatForm">
<input id="txt" autocomplete="off" autofocus="on" placeholder="Your message" /><button>Send</button>
</form>
<script>
var socket = io.connect('https://chatorzo-2.zdev1.repl.co');
$('form').submit(function(e){
e.preventDefault();
socket.emit('chat_message', $('#txt').val());
$('#txt').val('');
return false;
});
socket.on('chat_message', function(msg){
$('#messages').append($('<li>').html(msg));
});
socket.on('is_online', function(username) {
$('#messages').append($('<li>').html(username));
});
var username = prompt('Username:');
socket.emit('username', username);
</script>
</body>
</html>
그래서 기본적으로 CSS와 자바스크립트(jQuery)를 다음과 같이 추가했습니다.
사용자에서 사용자로 연결하려면
socket.io가 필요합니다.그리고 익스프레스 서버와 http도 필요합니다.
암호:
const express = require('express');
const app = express();
const http = require('http').Server(app);
const io = require('socket.io')(http);
2. Socket.io 연결
웹 소켓 연결을 위해서는 몇 줄의 코드가 필요합니다.
첫 번째 코드 블록은 사용자 이름(채팅 앱용)이고 다음을 전송합니다. '사용자 이름이 채팅에 참여했습니다...'
두 번째 코드 블록은 첫 번째 블록과 반대입니다.
코드의 세 번째 블록은 메시지에 관한 것으로 사용자가 메시지를 보낼 때 사용자 이름과 메시지 날짜가 포함된 메시지를 보냅니다.
네 번째 코드 블록(websocket 연결 외부)은 포트 수신 처리기입니다.
암호:
io.sockets.on('connection', (socket) => {
socket.on('username', function(username) {
socket.username = username;
io.emit('is_online', '🔵 <i>' + socket.username + ' joined the chat..</i>');
});
socket.on('disconnect', (username) => {
io.emit('is_online', '🔴 <i>' + socket.username + ' lefted the chat..</i>');
});
socket.on('chat_message', (message) => {
let time = new Date();
io.emit('chat_message',`<i>${time.toLocaleTimeString()}</i><br>` + '<strong>' + socket.username + '</strong>: ' + message);
});
});
// Server listen handler
server.listen(8080, ()=>{
console.log('Connected!');
});
4. 채팅용 HTML 파일을 렌더링합니다.
소켓 연결 전에 몇 줄을 추가해야 합니다.
HTML 채팅 앱 파일을 렌더링합니다.
암호:
app.get('/', function(req, res) {
res.sendFile(__dirname + "/index.html");
});
5. index.html에 코드를 채워 채팅 앱을 만듭니다.
채팅을 위한 양식을 만들기 위해 jQuery를 사용해야 합니다.
암호:
<!DOCTYPE html>
<html>
<head>
<title>Chatorzo</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #fff; padding: 3px; position: fixed; bottom: 0; width: 100%; border-color: #000; border-top-style: solid; border-top-width: 1px;}
form input { border-style: solid; border-width: 1px; padding: 10px; width: 85%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; margin-left: 2%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="../../socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body style="background: grey;">
<header align="center">
<h1>Chatorzo</h1>
</header>
<br>
<br>
<br>
<ul id="messages"></ul>
<form action="/" method="POST" id="chatForm">
<input id="txt" autocomplete="off" autofocus="on" placeholder="Your message" /><button>Send</button>
</form>
<script>
var socket = io.connect('https://chatorzo-2.zdev1.repl.co');
$('form').submit(function(e){
e.preventDefault();
socket.emit('chat_message', $('#txt').val());
$('#txt').val('');
return false;
});
socket.on('chat_message', function(msg){
$('#messages').append($('<li>').html(msg));
});
socket.on('is_online', function(username) {
$('#messages').append($('<li>').html(username));
});
var username = prompt('Username:');
socket.emit('username', username);
</script>
</body>
</html>
그래서 기본적으로 CSS와 자바스크립트(jQuery)를 다음과 같이 추가했습니다.
io.sockets.on('connection', (socket) => {
socket.on('username', function(username) {
socket.username = username;
io.emit('is_online', '🔵 <i>' + socket.username + ' joined the chat..</i>');
});
socket.on('disconnect', (username) => {
io.emit('is_online', '🔴 <i>' + socket.username + ' lefted the chat..</i>');
});
socket.on('chat_message', (message) => {
let time = new Date();
io.emit('chat_message',`<i>${time.toLocaleTimeString()}</i><br>` + '<strong>' + socket.username + '</strong>: ' + message);
});
});
// Server listen handler
server.listen(8080, ()=>{
console.log('Connected!');
});
소켓 연결 전에 몇 줄을 추가해야 합니다.
HTML 채팅 앱 파일을 렌더링합니다.
암호:
app.get('/', function(req, res) {
res.sendFile(__dirname + "/index.html");
});
5. index.html에 코드를 채워 채팅 앱을 만듭니다.
채팅을 위한 양식을 만들기 위해 jQuery를 사용해야 합니다.
암호:
<!DOCTYPE html>
<html>
<head>
<title>Chatorzo</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #fff; padding: 3px; position: fixed; bottom: 0; width: 100%; border-color: #000; border-top-style: solid; border-top-width: 1px;}
form input { border-style: solid; border-width: 1px; padding: 10px; width: 85%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; margin-left: 2%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="../../socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body style="background: grey;">
<header align="center">
<h1>Chatorzo</h1>
</header>
<br>
<br>
<br>
<ul id="messages"></ul>
<form action="/" method="POST" id="chatForm">
<input id="txt" autocomplete="off" autofocus="on" placeholder="Your message" /><button>Send</button>
</form>
<script>
var socket = io.connect('https://chatorzo-2.zdev1.repl.co');
$('form').submit(function(e){
e.preventDefault();
socket.emit('chat_message', $('#txt').val());
$('#txt').val('');
return false;
});
socket.on('chat_message', function(msg){
$('#messages').append($('<li>').html(msg));
});
socket.on('is_online', function(username) {
$('#messages').append($('<li>').html(username));
});
var username = prompt('Username:');
socket.emit('username', username);
</script>
</body>
</html>
그래서 기본적으로 CSS와 자바스크립트(jQuery)를 다음과 같이 추가했습니다.
<!DOCTYPE html>
<html>
<head>
<title>Chatorzo</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font: 13px Helvetica, Arial; }
form { background: #fff; padding: 3px; position: fixed; bottom: 0; width: 100%; border-color: #000; border-top-style: solid; border-top-width: 1px;}
form input { border-style: solid; border-width: 1px; padding: 10px; width: 85%; margin-right: .5%; }
form button { width: 9%; background: rgb(130, 224, 255); border: none; padding: 10px; margin-left: 2%; }
#messages { list-style-type: none; margin: 0; padding: 0; }
#messages li { padding: 5px 10px; }
#messages li:nth-child(odd) { background: #eee; }
</style>
<script src="../../socket.io/socket.io.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body style="background: grey;">
<header align="center">
<h1>Chatorzo</h1>
</header>
<br>
<br>
<br>
<ul id="messages"></ul>
<form action="/" method="POST" id="chatForm">
<input id="txt" autocomplete="off" autofocus="on" placeholder="Your message" /><button>Send</button>
</form>
<script>
var socket = io.connect('https://chatorzo-2.zdev1.repl.co');
$('form').submit(function(e){
e.preventDefault();
socket.emit('chat_message', $('#txt').val());
$('#txt').val('');
return false;
});
socket.on('chat_message', function(msg){
$('#messages').append($('<li>').html(msg));
});
socket.on('is_online', function(username) {
$('#messages').append($('<li>').html(username));
});
var username = prompt('Username:');
socket.emit('username', username);
</script>
</body>
</html>
그리고 그게 다야
좋은 하루 되세요!
소스 코드: https://repl.it/@ZDev1/chatorzo-2
Reference
이 문제에 관하여(✉ 채팅 앱 만드는 방법 ✉), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/zdev1official/how-to-make-a-chat-app-poc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
