패스트캠퍼스 챌린지 12일차 - 웹소켓을 통한 실시간 데이터 베이스 저장하기 및 이미지 불러오기

0. 공부 인증

공부시작 10시 15분

공부종료 23시 45분

으어 집에서 노트북으로만 공부를 하려고 하니 미쳐버리겠다.

누가 모니터좀....

챌린지의 최대 고비가 찾아왔다.

 

각설하고, 여튼 오늘도 공부를 시작해보자😄

 

 

1. 몽고 DB에 익터렉션 정보 저장하기

-몽고 DB와 연결하기

mongo.js

const { MongoClient } = require('mongodb')

const uri = `주소`

const client = new MongoClient(uri, {
    userNewParser : true,
    userUnifiedTopology : true
})

module.exports = client

main.js

~
mongoClient = require('./mongo')
~
// 데이터베이스에 한번만 연결하기 위해서.
const _client = mongoClient.connect()

// 데이터베이스에 한번 연결이 되면 그 이후부터는 그냥 막 써~
async function getChatCollercion() {
    const client = await _client
    return client.db('chat').collection('chats')
}

 서버에서 데이터베이스에 Chat 내용을 저장하기

    ctx.websocket.on('message', async (data) => {
        if(typeof data !== "string") return

        const chat = JSON.parse(data)
        const chatCollection = await getChatCollercion()
        await chatCollection.insertOne(date)
        
        ~~

 

데이터 베이스에 연결이 안된다...

네트워크 설정도 찾아보고 했지만, 지금 해결하기에는 시간이 늦어서 챌린지가 밀릴 수도 있어서 우선 등록하고 후에 계속 찾아봐야겠다.

 

우선 지금까지 정리한 내용을 작성해야겠다.

-서버에서는 클라이언트에 새로운 요청이 있으면

데이터 베이스에 저장된 정보를 클라이언트에 관련 데이터를 전송해주어야 한다.

(현재 어떤 이유인지는 모르겠으나, 이 부분에서 에러가 발생하는 것 같다. 꼭 다시 해결해야할 부분이다..)

//새로운 유저가 접속하면 여기서부터 시작함.
        const chatCollection = await getChatCollercion()
        const chatCursor = chatCollection.find(
            {},
            {
            sort : {
                createdAt : 1
            }
        })

        const chats =  await chatCursor.toArray()

        ctx.websocket.on(JSON.stringify({
            type : "sync",
            payload : {
                chats
            }
        }))

 

- 그리고 새로운 챗이 있을 때마다, 데이터 베이스에 관련 내용을 저장해야한다.

해당 부분은 코드 전체 부분을 올리고 주석으로 설명해야겠다.

 

// Using routes
// 웹소켓 미들웨어는 따로 .ws. 으로 넣어주게 되어있음
app.ws.use(
    // 아래 경로로 들어오면 웹소켓 처리를 하는 것.
    route.all('/ws', async(ctx) => {
        //새로운 유저가 접속하면 여기서부터 시작함.
        const chatCollection = await getChatCollercion()
        const chatCursor = chatCollection.find(
            {},
            {
            sort : {
                createdAt : 1
            }
        })

		// 들어온 Chat 데이터를 배열로 만들어주자
        const chats =  await chatCursor.toArray()

		// 데이터 베이스 정보를 클라이언트에게 전송하자
        ctx.websocket.on(JSON.stringify({
            type : "sync",
            payload : {
                chats
            }
        }))

		// message 이벤트가 발생할 경우.
        ctx.websocket.on('message', async (data) => {
            console.log("data")

            if(typeof data !== "string") return


            const chat = JSON.parse(data)
            await chatCollection.insertOne({
                ...chat,
                createdAt : new Date()
            })

            const { message, nickname } = chat

            const {server} = app.ws
            if(!server) return

            // 브로딩 캐스팅, 
            // 접속한 모든 클라이언트에게 전송.
            // 서버에는 접속한 모든 클라이언트의 정보가 담겨 있음.
            server.clients.forEach(client => {
                client.send(JSON.stringify({
                    type : "chat",
                    payload : {
                        message,
                        nickname
                    } 
                }))
            })
            
            // ctx.websocket.send(JSON.stringify({
            //     message,
            //     nickname
            // }))
        });
}));

 

 

2. 외부에서 원하는 이미지 소스 가져오기

https://unsplash.com/developers

Unsplash Image API | Free HD Photo API

를 참고해서 저작권이 허용된 여러 사진을 가져올 수 있어!

 

그리고 Node에서는 불러올 사진을 리사이징하는 라이브러리가 있어.

https://www.npmjs.com/package/sharp

sharp

해당 라이브러리를 사용하며 훨씬 더 최적하된 용량으로 이미지를 보낼 수 있어.

 

오늘은 우선 여기까지 작성을하고 마무리해야겠다.

 

집에서 공부하는게 진짜 쉬운 일이 아니다....ㅠㅠ

 

 

환급 챌린지 (12/30)

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지