이것은 typescript+vue+websocket을 기반으로 한 실시간 채팅 응용 프로그램으로 typescrpt+vue 결합의 예로 삼을 수도 있고express+websocket의 입문 참고로 삼을 수도 있다

코드 여기 있어요.

해설의 분할선 --------

모델 정의

실시간 채팅 앱에서 앞뒤가 가장 관심 있는 모델은 메시지와user이다.여기에 typescript로 다음과 같이 정의합니다

user

class User {
  private name: string
  private id: string
  private avatar: string
}

message

import User from './user'
class Message {
  private from: User;
  private content: string
  private type: string
}

이 모델의 앞뒤 부분은 다시 사용할 수 있습니다.

앞부분

채팅 응용 프로그램에서 메시지와user 데이터에 대한 조작이 빈번하기 때문에 이 부분과 관련된 코드를 vuex에 쓰고 mapstate와mapmutation를 통해 vue 실례에 주입합니다

@Component({
	computed: {
		...mapState(['ws', 'msgList', 'user']),
	},
	methods: {
		...mapMutations(['toggleLogin', 'initWS', 'addMsg', 'sendMsg']),
	},
})

socket 통신에 게으름을 피웠습니다. 새로운 소식이 있으면 채널로 직접 밀어넣고 채널의 변화를 감청하여 로컬로 렌더링합니다.

//   websocket
this.sendMsg({
  type: 'addMsg',
  from: user,
  content,
});
/     
this.ws.onopen = (e: any) => {
  console.log('connection established');
  this.sendJoin();
};
this.ws.onmessage = (e: any) => {
  const msg = JSON.parse(e.data);
  this.$store.commit('addMsg', msg);
};

실제 채팅 앱에서는 로컬과 웹소켓 채널을 동시에 전송하는데 로컬에서 전송된 메시지에 로딩을 추가하고 메시지가 실제로 로딩으로 전송되면 로딩을 제거한다(추측...)

백엔드 섹션

백엔드 코드는 설명하기 어려울 정도로 간단합니다.핵심 코드는 두 가지입니다.

// Broadcast to all.
const broadcast = (data: message) => {
	wss.clients.forEach((client) => {
		if (client.readyState === WebSocket.OPEN) {
			client.send(data);
		}
	});
};

wss.on('connection', (ws) => {
	console.log('connection established');
  //    ,        
	ws.on('message', (data: message) => {
		broadcast(data);
	});
});

부팅

cd client && npm run serve

cd server && npm run watch

이렇게 간단한 실시간 채팅 앱 하나로 완성~~~