NodeJS와 Socket을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법입출력 및 MongodB
52470 단어 nodemongodbjavascriptsocketio
NodeJS와 Socket을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법입출력 및 MongodB
이 자습서에서는 NodeJS, Express 및 Socket을 사용하여 실시간 채팅 애플리케이션을 구축합니다.IO와 MongodB.
다음은 구축할 화면 캡처입니다.
설치 프로그램
NodeJS와 NPM이 이미 설치되어 있다고 가정합니다.아직 설치되지 않은 경우 Node JS 웹 사이트에서 설치할 수 있습니다.
Javascript에 대한 기본 지식이 필요합니다.
자, 시작합시다.
응용 프로그램의 디렉토리를 만들고 가장 좋아하는 편집기(예: Visual Studio 코드)로 디렉토리를 엽니다.다른 편집기를 사용할 수 있습니다. 이 자습서에서 VS 코드를 사용하겠습니다.
mkdir chatApplication && cd chatApplication && code .
npm init
package.json 파일에 사용됩니다.종속성 설치
응용 프로그램의 의존항을 설치합니다.
우리는
express 웹 서버를 사용하여 정적 파일에 서비스를 제공하고 body-parser 전송 요청 흐름의 전체 주체 부분을 추출하여 API 노드에 공개할 것이다.그럼 설치해 봅시다.이 강좌의 뒷부분에서 어떻게 사용하는지 보실 수 있습니다. npm install express body-parser --save
package.json 파일에 추가할 수 있도록 --save 로고를 추가했습니다.참고:
Please, don’t use express generator as I won’t cover how to configure
socket.ioto work with express generator setup.
다음은 몬고우스 노드 모듈을 설치합니다.이것은 MongoDB의 ODM (대상 문서 맵) 입니다. 이것은 우리의 업무를 더욱 간단하게 할 것입니다.
우리는 그것을 콘센트 옆에 설치할 것이다.목위일과 푸른 새.콘센트.IO는 실시간 웹 응용 프로그램에 사용되는 JavaScript 라이브러리입니다.Bluebird는 모든 기능이 포함된 JavaScript Promise 라이브러리입니다.
npm install mongoose socket.io bluebird --save
우리
package.json 서류는 지금 이렇습니다.{
"name": "chatApplication",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node app"
},
"author": "",
"license": "ISC",
"dependencies": {
"bluebird": "^3.5.3",
"body-parser": "^1.18.3",
"express": "^4.16.4",
"mongoose": "^5.4.14",
"socket.io": "^2.2.0"
}
}
package.json 파일을 복사하여 package.json 파일에 붙여넣은 다음 실행하는 것입니다.npm install
클라이언트를 설정합니다.
<!doctype html>
<html>
<head>
<title>Anonymouse Real-time chat</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<!------ Include the above in your HEAD tag ---------->
<link href="/css/style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
<div class="chat_window">
<div class="top_menu">
<div class="buttons">
<div class="button close"></div>
<div class="button minimize"></div>
<div class="button maximize"></div>
</div>
<div class="title">Chat</div>
</div>
<ul id="messages" class="messages"></ul>
<div class="bottom_wrapper clearfix">
<i id="typing"></i>
<form id="form">
<div class="message_input_wrapper">
<input id="message" class="message_input" placeholder="Type your message here..." />
</div>
<button class="send_message">Send</button>
</form>
</div>
</div>
<script src="/js/socket.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/rexeze/formatTimeStamp/src/index.min.js"></script>
<script src="/js/chat.js"></script>
</body>
</html>
<script src="/js/socket.js"></script>
클라이언트 소켓을 다운로드할 수 있습니다.IO 라이브러리here.
여기
/js/chat.js는 저희가 맞춤형 클라이언트 자바스크립트 코드를 만드는 곳입니다.express 서버를 설정하려면:
를 생성합니다
App.js.너는 서버라고 할 수 있다.니가 원한다면나는 개인적으로 그것을 앱이라고 부르는 것을 좋아한다.js.
응용 프로그램 내부에 있습니다.socket을 사용하려면express 서버를 만들고 설정합니다.이오.
App.js//Require the express moule
const express = require(“express”);
//create a new express application
const app = express()
//require the http module
const http = require(“http”).Server(app)
// require the socket.io module
const io = require(“socket.io”);
const port = 500;
const socket = io(http);
//create an event listener
//To listen to messages
socket.on(“connection”, (socket)=>{
console.log(“user connected”);
});
//wire up the server to listen to our port 500
http.listen(port, ()=>{
console.log(“connected to port: ”+ port)
});
콘센트.IO의 작업 원리는 이벤트 탐지기를
http.Server의 실례에 추가하는 것이다이것이 바로 우리가 여기서 한 일이다.
const socket = io(http);
socket.on(“connection”, (socket)=>{
console.log(“user connected”);
});
콘센트.on () 은 이벤트 이름과 리셋을 매개 변수로 합니다.
또한 사용자가 탭을 닫을 때마다 트리거하는 특별한 연결 끊기 이벤트도 있습니다.
socket.on(“connection”, (socket)=>{
console.log(“user connected”);
socket.on("disconnect", ()=>{
console.log("Disconnected")
})
});
프런트엔드 코드 설정
js/chat.js 파일을 열고 다음 코드를 입력합니다.(function() {
var socket = io();
$("form").submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit("chat message", $("#m").val());
$("#m").val("");
return true;
});
})();
이 코드를 통해 우리는 soicket의 전체적인 실례를 만들었다.io 클라이언트가 전면에 있습니다.
var socket = io();
$("form").submit(function(e) {
e.preventDefault(); // prevents page reloading
socket.emit("chat message", $("#m").val());
$("#m").val("");
return true;
});
😄
다행이네요. 택배와 콘센트가 있어요.io 서버 설정이 정상입니다.사실 우리는 이미 입력 상자에서 메시지를 보내서 서버에 메시지를 보낼 수 있다.
socket.emit("chat message", $("#m").val());
App.jssocket.on("chat message", function(msg) {
console.log("message: " + msg);
//broadcast message to everyone in port:5000 except yourself.
socket.broadcast.emit("received", { message: msg });
});
});
socket.on("chat message", function(msg){
});
우리의 예에서, 우리는 그것을 데이터베이스에 저장하여 클라이언트에게 보낼 것이다.
방송할게요.이것은 서버가 그것을 발송자를 제외한 모든 서버에 연결된 사람에게 보낼 것이라는 것을 의미한다.
따라서 A씨가 서버에 메시지를 보내고 서버가 메시지를 방송하면 B씨, C씨, D씨 등은 메시지를 받지만 A씨는 받지 않는다.
우리는 우리가 보낸 메시지를 받고 싶지 않다. 그렇지?😭
이것은 우리가 보낸 정보를 받을 수 없다는 것을 의미하지 않는다.만약 우리가 방송 표지를 삭제한다면, 우리도 소식을 삭제할 것이다.
다음은 활동을 재생하는 방법입니다.
socket.broadcast.emit("received",{message:msg})
프로그램을 실행하면너는 반드시 유사한 물건을 보아야 한다.나의 현장 채팅을 비웃지 마세요.❤️
와우!다시 한 번 축하드립니다.데이터베이스 내용을 추가하고 채팅 기록을 앞에 보여 드리겠습니다.
데이터베이스 설정
MongodB 설치
아직 다운로드하지 않은 경우 mongoDB 웹 사이트를 방문하여 다운로드하십시오.
MongodB 서버가 실행 중인지 확인하십시오.그들은 어떻게 설정하고 그것을 시작하고 실행하는지 상세하게 설명하는 훌륭한 문서를 가지고 있다.파일을 찾을 수 있습니다 here.
채팅 모드 만들기
모델 디렉토리에
models/ChatSchema.js라는 파일을 생성합니다.복잡한 것은 없습니다. 우리의 모드에는 메시지 필드, 발송자 필드, 시간 스탬프 세 개만 있습니다.
ChatSchema.js 파일은 다음과 같습니다.
const mongoose = require("mongoose");
const Schema = mongoose.Schema;
const chatSchema = new Schema(
{
message: {
type: String
},
sender: {
type: String
}
},
{
timestamps: true
});
let Chat = mongoose.model("Chat", chatSchema);
module.exports = Chat;
몬godb 데이터베이스에 연결
파일을 만들고 이름을
dbconnection.js로 지정합니다.이것이 바로 우리 데이터베이스 연결의 소재지다.const mongoose = require("mongoose");
mongoose.Promise = require("bluebird");
const url = "mongodb://localhost:27017/chat";
const connect = mongoose.connect(url, { useNewUrlParser: true });
module.exports = connect;
데이터베이스에 메시지 삽입
서버 측에 메시지를 삽입할 것이기 때문에, 전방에서 받은 메시지를
App.js 파일에 삽입할 것입니다.그럼 프로그램을 업데이트합시다.js 파일.
...
//database connection
const Chat = require("./models/Chat");
const connect = require("./dbconnect");
//setup event listener
socket.on("connection", socket => {
console.log("user connected");
socket.on("disconnect", function() {
console.log("user disconnected");
});
socket.on("chat message", function(msg) {
console.log("message: " + msg);
//broadcast message to everyone in port:5000 except yourself.
socket.broadcast.emit("received", { message: msg });
//save chat to the database
connect.then(db => {
console.log("connected correctly to the server");
let chatMessage = new Chat({ message: msg, sender: "Anonymous"});
chatMessage.save();
});
});
});
let chatMessage = new Chat({ message: msg, sender: "Anonymous"});
chatMessage.save();
프런트엔드에 메시지 표시
우선 데이터베이스에 있는 메시지 기록을 표시하고 이벤트가 보내는 모든 메시지를 추가합니다.
이를 위해 get 요청을 보낼 때 데이터베이스에서 클라이언트에게 데이터를 보내는 API를 만들어야 합니다.
const express = require("express");
const connectdb = require("./../dbconnect");
const Chats = require("./../models/Chat");
const router = express.Router();
router.route("/").get((req, res, next) => {
res.setHeader("Content-Type", "application/json");
res.statusCode = 200;
connectdb.then(db => {
Chats.find({}).then(chat => {
res.json(chat);
});
});
});
module.exports = router;
서버 코드
App.js file 를 가져오고,bodyparser 중간부품도 가져옵니다.const bodyParser = require("body-parser");
const chatRouter = require("./route/chatroute");
//bodyparser middleware
app.use(bodyParser.json());
//routes
app.use("/chats", chatRouter);
// fetching initial chat messages from the database
(function() {
fetch("/chats")
.then(data => {
return data.json();
})
.then(json => {
json.map(data => {
let li = document.createElement("li");
let messages = docuemtn.getElementById("messages")
let span = document.createElement("span");
messages.appendChild(li).append(data.message);
messages
.appendChild(span)
.append("by " + data.sender + ": " + formatTimeAgo(data.createdAt));
});
});
})();
그리고 제가
formatTimeAgo(data.createdAt));을 사용했습니다. 이것은 제가 만든 1.31kb 라이브러리입니다. 지금부터 저는 작은 프로젝트를 관리하기 시작할 것입니다.js가 때때로 너무 커요.formatTimeAgo()는 "몇 초 전"등을 표시합니다.만약 당신이 흥미가 있다면 더 많은 정보를 찾을 수 있습니다 here.
지금은 모든 것이 다 좋은 것 같아, 그렇지?
그러나 서버로 보내는 메시지를 받지 못했기 때문에 입력란에서 메시지를 가져와 UI에 표시합니다.
(function() {
$("form").submit(function(e) {
let li = document.createElement("li");
e.preventDefault(); // prevents page reloading
socket.emit("chat message", $("#message").val());
messages.appendChild(li).append($("#message").val());
let span = document.createElement("span");
messages.appendChild(span).append("by " + "Anonymous" + ": " + "just now");
$("#message").val("");
return false;
});
})();
(function(){
socket.on("received", data => {
let li = document.createElement("li");
let span = document.createElement("span");
var messages = document.getElementById("messages");
messages.appendChild(li).append(data.message);
messages.appendChild(span).append("by " + "anonymous" + ": " + "just now");
});
})
만약 우리가 사용자를 로그인하게 한다면, 우리는 지금처럼 '익명' 사용자를 하드코딩하지 않을 것입니다.서버에서 가져올게요.
만약 네가 사람들에게 누군가가 타자를 치고 있다는 것을 알려주고 싶다면, 너도 앞에서 이 코드를 추가할 수 있다.
//isTyping event
messageInput.addEventListener("keypress", () => {
socket.emit("typing", { user: "Someone", message: "is typing..." });
});
socket.on("notifyTyping", data => {
typing.innerText = data.user + " " + data.message;
console.log(data.user + data.message);
});
//stop typing
messageInput.addEventListener("keyup", () => {
socket.emit("stopTyping", "");
});
socket.on("notifyStopTyping", () => {
typing.innerText = "";
});
다음은 서버측 이벤트 탐지기 및 송신기입니다.
//Someone is typing
socket.on("typing", data => {
socket.broadcast.emit("notifyTyping", { user: data.user, message: data.message }); });
//when soemone stops typing
socket.on("stopTyping", () => { socket.broadcast.emit("notifyStopTyping"); });
이 코드를 개선하고, 인증을 추가하거나, 그룹을 추가하거나, 일대일 채팅을 하거나, 모든 것에 적응하기 위해 모델링을 다시 할 수 있습니다.
socket으로 구축될 실시간 프로그램을 보면 매우 흥분됩니다.이오.
나는 이것이 도움이 되기를 바란다.모든 코드가 Github에 있습니다.너는 그것을 얻을 수 있다here.
Reference
이 문제에 관하여(NodeJS와 Socket을 사용하여 실시간 채팅 애플리케이션을 구축하는 방법입출력 및 MongodB), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/rexeze/how-to-build-a-real-time-chat-app-with-nodejs-socketio-and-mongodb-2kho텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
