Node를 사용하여 Replit-to-Replit 채팅 애플리케이션을 구축합니다.js

이 강좌에서 우리는 남다른 채팅 앱을 제작할 것이다.일반적인 웹 클라이언트에서 서버로의 채팅 구조와 달리, 우리는 Replit의 Repl 컨트롤러 창에서 채팅 프로그램을 직접 실행할 것이다.
우리는 콘센트를 사용한다.io는 Google 응용 프로그램에서 WebSocket을 실현합니다.브라우저뿐만 아니라 Socket.io-client code can be run in Node.js의 도움을 받았습니다!

개요 및 요구 사항

우리는 Replit 웹 IDE를 이용하여 채팅 응용 프로그램을 개발하고 실행할 것이다.Google은 최종적으로 채팅 서버를 실행하는 Replit 프로젝트와 채팅을 하고 싶은 클라이언트 Replit 프로젝트를 여러 개 받을 것입니다.이 강좌에서 Replit 계정이 필요하므로 create an account 그렇지 않은 경우.
이 자습서에서는 다음을 수행합니다.

Express와 Socket.io로 채팅 서버를 만듭니다.

Socket.io-client로 채팅 클라이언트를 만듭니다.

노드에서 사용readline module.js는 사용자 인터페이스를 만들고 리플의 컨트롤러 창에서 채팅을 합니다.

채팅 서버 만들기

로그인Replit에 새 리플을 만듭니다.

노드를 선택합니다.js는 당신의 언어로서

당신의 리플을'리플 채팅 서버'라고 명명합니다.

웹 프레임워크 추가

채팅 클라이언트로부터 요청을 전달할 수 있는 웹 프레임워크부터 시작해야 합니다.우리는 유행하는 노드Express를 사용할 것이다.js 웹 프레임워크.기본index.js 파일에expressjs에 대한 인용을 추가하고 새express 프로그램을 만듭니다.

const express = require('express');
const app = express();

Replit 매우 유용한 패키지 기능이 있는데 이것은 우리가 수동으로 패키지를 설치할 필요가 없다는 것을 의미한다.우리가 코드에서 그것들을 인용할 때, 그것들은 우리가 Express에서 한 것처럼 자동으로 설치될 것이다.

웹 서버 추가

현재 Google은 웹 프레임워크를 가지고 있습니다. 요청을 감청하고 HTTP 프로토콜을 처리할 웹 서버를 만들어야 합니다.이 작업은 내장형node HTTP module을 사용합니다.
HTTP에 대한 참조를 추가하고 위에서 만든 express 프레임워크를 사용하여 새 서버를 만듭니다.

const http = require('http'); 
const server = http.Server(app);

소켓을 사용하여 서버를 확장합니다.목위일

채팅이 실시간으로 응답할 수 있도록 웹소켓으로 웹 서버를 확장합니다.WebSocket은 클라이언트와 서버 간에 장기적인 연결을 만드는 데 사용됩니다.이것은 우리가 메시지를 보내고 받을 때마다 서버에 새 연결을 만들 필요가 없다는 것을 의미한다.효율을 말해 봐!
다음 코드를 추가하여 서버를 확장하여 WebSocket을 지원합니다.

const sockets = require('socket.io');
io = sockets(server);

새로운 연락처 및 정보 경청

현재 우리는 모든 인프라 시설을 갖추고 있으며, 우리는 새로운 연결과 정보를 어떻게 처리하는지 설정할 수 있다.콘센트.io에는 우리가 창조하고 경청할 수 있는 것이 많다events.우리는 새로운 connection 이벤트와 맞춤형 message 이벤트를 사용할 것입니다.다음 코드를 추가하여 새 연결 이벤트와 클라이언트로부터 전송된 메시지를 처리합니다.

io.on('connection', function (connection) {
    connection.on('message', function(data) {
        console.log('new message: ' + data); 
        io.emit("broadcast", data);
    });
});

이 코드는 첫 번째 줄의 새 연결 이벤트를 처리합니다.이 연결을 가져오고 클라이언트가 두 번째 줄에서 새 메시지를 보낼 때까지 기다립니다.
새 메시지가 나타나면 3행의 로컬 서버 콘솔에 기록됩니다.이것은 정말 단지 우리 자신의 디버깅과 흥미를 위해서일 뿐이다.생산 프로그램에서, 우리는 나중에 조회할 수 있도록 메시지 로그를 저장할 수 있습니다.
네 번째 줄은 우리가 연결된 모든 클라이언트에게 메시지를 보내거나 보내는 곳입니다. 이렇게 하면 그들이 메시지를 볼 수 있습니다.

서버 시작 및 테스트

마지막으로, 우리는 연결을 감청하기 위해 채팅 서버를 시작해야 한다.다음 코드를 추가하여 서버를 시작합니다.

server.listen(3000, function() {
  console.log('listening on port 3000');
});

서버를 테스트하려면 리플의 맨 위에 있는 큰 '실행' 단추를 누르십시오.패키지를 설치하고 연결을 출력하고 포트 3000에 감청을 쓰는 것을 보셔야 합니다.

전체 서버 코드

서버 코드 완성!완료한 코드는 다음과 같습니다.

const express = require('express');
const app = express();

const http = require('http');
const server = http.Server(app);

const sockets = require('socket.io');
io = sockets(server);


io.on('connection', function (connection) {
    connection.on('message', function(data) {
        console.log('new message: ' + data); 
        io.emit("broadcast", data);
    });
});


server.listen(3000, function() {
  console.log('listening on 3000');
});

채팅 클라이언트 구축

노드를 사용하여 새 리플을 만듭니다.js를 선택한 언어로 합니다.이 리플에 이름을 붙여 주십시오. 예를 들어 '리플 채팅 클라이언트' 입니다.

Socket 클라이언트 및 readline 모듈 추가

색인에 Socket.io-client 및 readline module를 추가합니다.js 파일:

const io = require('socket.io-client');
const readline = require('readline');

채팅 서버에 새 연결 만들기

다음 행을 추가하여 채팅 서버 repl에 연결을 추가합니다.

var socket = io("https://repl-chat-server.<your username>.repl.co");

위 행의 <your username>를 실제 Replit 사용자 이름으로 바꿉니다.

콘솔 인터페이스 설정

우리는 순전히 리플 컨트롤러에서 이 채팅 프로그램을 만들기 때문에, 컨트롤러에서 메시지를 읽고 쓸 수 있어야 한다.이를 돕기 위해 readline module를 사용합니다.다음 코드를 추가하여 인터페이스를 생성합니다.

const chat_interface = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});

이 줄input: process.stdin은 표준 입력(일반적으로 컨트롤러)에서 사용자 입력을 받을 것을 의미한다.마찬가지로 output: process.stdout는 우리가 메시지를 표준 출력, 즉 컨트롤러에 출력한다는 것을 의미한다.

사용자 및 메시지 변수

사용자의 채팅 핸들 (사용자 이름) 과 그들이 보내고자 하는 메시지를 기억하기 위해서, 우리는 두 개의 변수를 설정할 것입니다.코드에 다음을 추가합니다.

var chat_handle = "";
var message_to_send = "";

소켓 이벤트 처리

우리는 두 가지 주요 활동에 대해 흥미를 느낀다.

채팅 서버에 성공적으로 연결했을 때.

서버가 우리에게 메시지를 방송할 때.

다음 코드를 추가하여 이러한 이벤트에 연결합니다.

socket.on('connect', function(){
    get_chat_handle(); 
    socket.on('broadcast', display_message);
}); 

이 코드가 두 가지 방법을 호출했다는 것을 알 수 있습니다. get_chat_handle 와 display_message.다음에 우리는 이것들을 정의할 것이다.

사용자 채팅 핸들 가져오기

일단 우리가 서버에 성공적으로 연결되면, 우리는 사용자를 소개할 것이다.이 함수를 코드에 추가하려면 다음과 같이 하십시오.

// Gets the user's name, so we can introduce and prepend each message with their name
function get_chat_handle(){
    chat_interface.question(`Hello! What's your chat handle? `, function(answer){
        chat_handle = answer;
        socket.emit("message", chat_handle + ' has entered the chat');
        chat();
    });
}

그것은 우리가 이전에 설정한 인터페이스를 사용하여 사용자에게 "당신의 채팅 손잡이는 무엇입니까?"라고 물었다.답이 나오면 앞에 추가된 변수chat_handle에 저장합니다.그런 다음 socket.emit("message")를 사용하여 서버에 보냅니다.서버는 정보를 얻은 후에 그것을 모든 다른 채팅 클라이언트에게 방송할 것이다.
마지막으로, 우리는 chat() 함수를 호출하고, 우리는 다음 단계에서 설정할 것이다.

사용자 메시지 대기 및 보내기

현재 우리는 chat() 함수를 실현하여 사용자의 메시지를 기다리고 서버에 보낼 것입니다.이 함수를 코드에 추가하려면 다음과 같이 하십시오.

// Waits for a new message to send
function chat(){
    chat_interface.question(chat_handle + ": ", function(message){
        message_to_send = chat_handle + ': ' + message;
        socket.emit("message", message_to_send );
        chat();
    });
}

이 코드는 사용자의 chat_handle 명령을 사용하여 컨트롤러에 알림을 추가하고 메시지를 입력할 때까지 기다립니다.이것은 chat_interface.question 방법을 통해 완성된 것이다.그들이 메시지를 입력할 때, 우리는 사용자의 채팅 핸들을 사용해서 앞에 놓고, 이전에 추가한 변수 message_to_send 에 저장합니다.그리고 우리는 socket.emit를 사용하여 이 조합의 사용자 채팅 핸들과 메시지를 서버에 보냅니다.마지막으로, 우리는 chat() 함수를 다시 호출하여, 알림을 설정하고 다음 메시지를 기다립니다.

다른 사용자로부터 메시지 표시

우리의 마지막 함수는 서버에서 받은 메시지를 기록합니다.우리는 앞에 추가된 코드에서 이러한 소식을 얻었다. socket.on('broadcast', display_message);이 코드는 모든 방송 정보를 감청한 다음 함수 display_message 를 호출합니다.우리는 지금 이 함수를 실현할 것이다.
코드에 display_message 함수를 추가하려면 다음과 같이 하십시오.

// Handles an incoming message, and checks to see that it is not the one we sent. 
// Shows it on the console if it is from another user. 
function display_message(message){
    if(message_to_send != message){
        console.log("\n" + message);
        chat();
    }
}

함수 성명 위의 주석에서 말한 바와 같이 이 함수는 먼저 전송된 메시지와 사용자가 보낸 마지막 메시지를 비교하고 이 메시지는 message_to_send 변수에 저장된다.전송된 메시지가 일치하면 함수는 이 메시지를 무시하고 쓰지 않습니다.만약 한 사용자가 메시지를 보내서 그들에게 직접 보내게 한다면 이것은 매우 이상하게 보일 것이다.
만약 그것이 일치하지 않는다면 (즉 다른 사용자의 메시지), 우리는 그것을 컨트롤러에 쓰고, 그 앞에 줄 바꾸기 \n 를 붙인다.그리고 우리는 사용자가 회답을 보낼 때까지 chat() 함수를 다시 호출합니다.

전체 클라이언트 코드

우리는 이미 채팅 클라이언트 코드를 완성했다!완료된 코드는 다음과 같습니다.

const io = require('socket.io-client');
const readline = require('readline');

var socket = io("https://repl-chat-server.<your username>.repl.co");

const chat_interface = readline.createInterface({
  input: process.stdin,
  output: process.stdout
});


var chat_handle = "";
var message_to_send = "";


socket.on('connect', function(){
    get_chat_handle(); 
    socket.on('broadcast', display_message);
}); 

// Gets the user's name, so we can introduce and append each message with their name
function get_chat_handle(){
    chat_interface.question(`Hello! What's your chat handle? `, function(answer){
        chat_handle = answer;
        socket.emit("message", chat_handle + ' has entered the chat');
        chat();
    });
}

// Waits for a new message to send
function chat(){
    chat_interface.question(chat_handle + ": ", function(message){
        message_to_send = chat_handle + ': ' + message;
        socket.emit("message", message_to_send );
        chat();
    });
}

// Handles an incoming message, and checks to see that it is not the one we sent. 
// Shows it on the console if it is from another user. 
function display_message(message){
    if(message_to_send != message){
        console.log("\n" + message);
        chat();
    }
}

플러그인 연결 중 <your username> 을 Replit의 실제 사용자 이름으로 바꾸는 것을 기억하십시오.

클라이언트 어플리케이션 실행

현재 채팅 클라이언트 리플의 맨 위에 있는 '실행' 단추를 누르면 클라이언트 응용 프로그램을 테스트할 수 있습니다.너는 그것이 소프트웨어 패키지를 설치하고 연결을 출력하는 것을 보아야 한다. 마지막으로 너에게 안부를 물어야 한다.당신의 채팅 손잡이는 무엇입니까?
이것은 우리가 만든 채팅 서버를 계속 실행하고 있다고 가정합니다.
클라이언트에 메시지를 입력하면 서버에 로그인된 것을 볼 수 있습니다.다음 그림은 클라이언트의 리플 컨트롤러를 왼쪽에 표시하고 서버의 리플 컨트롤러를 오른쪽에 표시합니다.

친구와 이야기를 나누다

현재 우리는 이미 서버와 클라이언트를 구축하여 친구와 채팅을 할 수 있다.친구에게 클라이언트 코드를 복제하고 자신의Replit 계정에서 실행하게 하면 그들이 당신과 채팅을 할 수 있습니다.또는 그들과 채팅 클라이언트 리플의 링크를 공유합니다.
채팅 서버 프로그램을 실행합니다.그리고 클라이언트 프로그램과 친구의 클라이언트 프로그램을 실행합니다.
클라이언트 프로그램에서 사용자 이름을 입력하라는 알림을 보게 될 것입니다.보내면 클라이언트와 서버 로그에 표시됩니다.이제 리플 컨트롤러에서 서로 메시지를 보낼 수 있습니다!일단 친구와의 합작에 만족한다면 다른 사람을 초대해도 된다.

그것 을 너 자신 의 것 으로 만들다

계속하면, 자신의 버전의 채팅 서버와 채팅 클라이언트 리플이 확장됩니다.만약 없다면, 우리부터 시작하자.아래에 포함된 REPL에서 채팅 서버나 채팅 클라이언트를 분리합니다.

예제 REPS

너는 우리의 예를 찾을 수 있다
Chat server 및 chat client

다음에 시도할 일

너는 채팅 프로그램의 재미를 높이기 위해 재미있는 일을 시도해 볼 수 있다.

메시지 출력에 서로 다른 색을 사용해 보세요. 하나는 사용자에게 사용되고, 다른 하나는 그들의 채팅 친구에게 사용됩니다.여기에 사용할 수 있는 많은 모듈이 있는데 그 중 하나는 colors입니다.

이전의 채팅 기록을 복구하기 위해 서버 메시지를 Replit database에 기록하려고 시도합니다.