나는 MEVN 스택과 플러그인으로 만든 채팅 앱을 사용한다.목위일

몇 개월의 지연 끝에 나는 마침내 개발자로서의 첫 글을 썼다
그래서 저는 MEVN(MongoDB, Express, Vue.js, Node.js) 창고와 chat app로 socket.io를 만들었습니다.응용 프로그램 기능의 영감은discord 응용 프로그램에서 나온다.

이 애플리케이션의 기능은 다음과 같습니다.

사용자는 사용자 이름과 비밀번호를 사용하거나 다른 소셜 미디어 계정으로 로그인할 수 있습니다

시작 채널에 사용자 자동 추가

사용자가 채널을 만들 수 있음

사용자가 채널을 검색하고 가입할 수 있음

사용자가 채널을 떠날 수 있음

사용자는 자신의 개인 자료를 편집하고 디스플레이 그림을 변경할 수 있다

나중에 추가할 기능

사용자가 공공 채널을 조회하고 가입할 수 있음

사용자는 채널 구성원에게 직접 메시지를 보낼 수 있음

사용자의 간단한 개인 정보 카드를 사용자 이름

에 걸다

사용자는 응용 프로그램의 테마를 변경할 수 있습니다.

이 글은 socket.io 응용 프로그램에서 어떻게 사용하는지 중점적으로 소개할 것이다.다음은 소스 코드Link와 live link입니다.
그러나 이 글을 똑똑히 이해하기 위해 나는 몇 가지 관건적인 용어를 설명할 것이다.

채널 모드

const mongoose=require('mongoose');
const Schema=mongoose.Schema;
const channelSchema=new Schema({
    name:String,
    description:String,
    members:[
        {
            type:mongoose.Schema.Types.ObjectId,
            ref:"User"
        }
    ],
    messages:[{
        type:mongoose.Schema.Types.ObjectId,
        ref:"Message"
    }]
})

module.exports=mongoose.model('Channel',channelSchema);

사용자가 채널에 메시지를 보낼 때, 새로운 메시지를 채널에 전송하는 메시지 그룹을 통해 채널을 업데이트합니다.

채널: 사용자가 현재 보고 있는 채널

을 나타냅니다.

채널: 사용자가 속한 채널 그룹을 표시합니다.

업데이트된 채널: 멤버가 보낸 최신 메시지를 사용하여 업데이트되는 채널 객체입니다.i, e. 새 메시지가 메시지 그룹 속성으로 전송되었습니다.

콘센트.목위일

콘센트.io는 클라이언트와 서버 간의 실시간 양방향 데이터 흐름을 실현하는 데 사용됩니다.i, e. 클라이언트는 이벤트와 일부 데이터를 보낼 수 있고 서버는 이 이벤트를 감청하여 이를 처리한다.즉, 페이지를 새로 고칠 필요 없이 클라이언트와 서버 간에 데이터를 교환할 수 있습니다.

콘센트.서버의 io

콘센트.io의 설치는 그림과 같다

npm install socket.io

그리고expressserver를 사용하여 맞춤법io연결을 설정합니다. 그림과 같습니다.

const express=require('express');
const socket = require('socket.io');
const app=express();
const server = app.listen(process.env.PORT || 3000,function(){
  console.log("running");
});

const io = socket(server,{
  cors: {
    origin: "https://calm-meadow-71961.herokuapp.com",
    methods: ["GET","PUT", "POST"],
  }
});

서버에서 클라이언트로부터 보내는 세 가지 사건을 플러그인으로 탐지합니다.

RegisterAll: 클라이언트가 소켓에 연결될 때마다 이 이벤트가 전송됩니다.io 연결.사용자의 채널 어레이가 이벤트와 함께 전송됩니다.이 이벤트는 클라이언트에 채널 ID 배열room을 추가하여 채널 배열의 각 채널 ID에 가입함으로써 처리됩니다.

socket.on('registerAll',channels=>{
      channels.forEach(channel => {
         socket.join(channel._id);
      });
});

등록: 사용자가 새 채널에 가입하면 이 이벤트가 발생합니다.새 채널 대상은 이벤트와 함께 발송됩니다.이 이벤트는 클라이언트가 새 채널에 가입하는 ID를 통해 처리됩니다. 즉, 클라이언트가 새 방에 가입하는 것입니다.

 socket.on('register',channel=>{
       socket.join(channel._id);
})

메시지Sent:예,

메시지가 채널에 전송됨;

사용자가 채널을 떠나기;

사용자가 한 채널에 가입하기;

사용자가 새 채널을 만듭니다.
이 이벤트는 MessageReceived 이벤트와 업데이트 채널 대상을 채널 ID실에 속하는 모든 클라이언트에게 보내서 처리됩니다.

 socket.on('messageSent',(channel)=>{
       socket.to(channel._id).emit('messageReceived',channel);
    })

Note: The messageSent and the Register events are both emitted from the client when a user joins a channel or creates a new channel

콘센트.클라이언트 IO

콘센트.io 클라이언트 설치

npm install socket.io-client;

그리고express 서버 URL을 가져와서 초기화합니다

<script>
import io from 'socket.io-client';
data(){
  return {
   disconnected:false,
   channels:[],
   channel:{},
   socket:io("https://whispering-everglades42925.herokuapp.com"),
  }
}
<script/>

클라이언트에서 클라이언트는 서버에서 보내는 세 가지 이벤트를 처리합니다.

연결: 클라이언트가 플러그인에 연결할 때 보내는 보존 이벤트입니다.io 연결.이 이벤트를 처리하는 방법은 사용자의 채널 (사용자가 속한 채널 그룹) 과 함께'regsiterAll '이벤트를 보내고 연결을 끊는 변수를false로 설정하는 것입니다.

this.socket.on("connect", () => {
     if(this.channels.length>0){
          this.registerChannels(this.channels);
          this.disconnected=false;
     }
});

연결 끊기: 클라이언트가 플러그인과 연결을 끊을 때 보내는 보존 이벤트입니다.io 연결.연결을 끊은 변수를 true로 설정해서 이 이벤트를 처리합니다.

this.socket.on("disconnect", (reason) => {
      this.disconnected=true;
});

따라서 클라이언트가 플러그인 연결과 연결을 끊을 때마다'disconnected '(연결을 끊는 것) 한 단락을 표시합니다<p class="disconnected" v-if="disconnected">disconnected</p>

MessageReceived: 이벤트와 함께 보내는 업데이트 채널 교체 채널 그룹의 채널을 사용하여 이 이벤트를 처리합니다.

 this.socket.on('messageReceived',(channel)=>{
       this.updateChannel(channel);
});`

업데이트 채널 메서드의 정의는 다음과 같습니다.

funtion updateChannel(updatedChannel){
             if(updatedChannel._id===this.channel._id){
                 this.channel=updatedChannel;
             }
             this.channels = this.channels.map(channel => (channel._id === updatedChannel._id) ? updatedChannel : channel)
        }

함수는 메시지 Received 이벤트와 함께 전달되는 업데이트dChannel 파라미터를 받아들여 현재 보기 채널을 설정합니다
업데이트dChannel과 같으면 사용자 채널의 만료된 채널을 업데이트dChannel로 바꿉니다
이것은 나의 첫 번째 댓글입니다. 읽어 주셔서 감사합니다.