chatr
v0.1.0
이것은 간단한 다중 사용자 웹 기반 채팅 시스템으로 설계된 데모 및 샘플 응용 프로그램입니다.
영구 그룹 채팅, 사용자 대 사용자 개인 채팅, 사용자 목록, 유휴 (키보드에서) 감지 및 기타 여러 기능을 제공합니다.
웹 pubsub, 정적 웹 앱 및 테이블 스토리지를 포함한 여러 Azure 기술을 기반으로합니다.
? ? 메모. 이것은 개인 프로젝트로 만들어졌으며 흥미로운 것을 구축하면서 학습을 돕기 위해 만들어졌습니다. 이 코드는 그러한 프로젝트에서 기대할 수있는 모든 경고와 함께 제공됩니다.
목표 :
사용 사례 및 주요 기능 :
이것은 브라우저를 통해 최종 사용자가 사용하는 주요 웹 프론트 엔드입니다.
이에 대한 소스는 클라이언트 에서 찾을 수 있으며 정적 독립형 순수 ES6 JS 응용 프로그램으로 구성되며 번들링 또는 Node.js가 필요하지 않습니다. vue.js를 지원 프레임 워크로 사용하고 Bulma를 CSS 프레임 워크로 사용하여 작성되었습니다.
몇 가지 메모 :
client/js/app.js 이 접근법을 사용하여 자식 구성 요소로 vue.js 앱을 만드는 방법을 보여줍니다. 클라이언트 논리의 대부분은 여기에 있습니다.client/js/components/chat.js 는 응용 프로그램에서 각 채팅 탭을 호스팅하는 데 사용되는 vue.js 구성 요소입니다..auth/ Endpoint는 사용자 로그인하고 userID와 같은 사용자 세부 정보를 가져 오는 데 사용됩니다.이것은 백엔드, WebSocket 이벤트를 Azure Web Pubsub로 처리하고 일부 작업에 대한 REST API를 제공합니다.
이것의 소스는 API/ 에서 찾을 수 있으며 node.js azure 함수 앱으로 구성됩니다. Azure 테이블 스토리지에 연결하여 그룹 채팅 및 사용자 데이터를 지속시킵니다 (테이블 스토리지는 단순하고 저렴하기 때문에 선택되었습니다). 독립형 Azure 기능 앱에서 호스팅되지 않고 Serverless API 지원의 일부로 정적 웹 앱에 배포됩니다.
기본 /api/ PATH에서 모두 제공되는 4 개의 HTTP 함수가 있습니다.
eventHandler Azure Web PubSub Service에서 보낸 "업스트림"이벤트에 대한 Webhook 수신기에는 대부분의 응용 프로그램 논리가 포함되어 있습니다. 클라이언트가 직접 호출하지 않으며 Azure WebPub Sub 만 있습니다.getToken 고객이 호출하여 웹 사이트를 통해 Azure Web PubSub 서비스에 연결할 액세스 토큰 및 URL을 얻습니다. URL 쿼리에서 userId와 함께 호출해야합니다 /api/getToken?userId={user}getUsers 서명 된 사용자 목록을 반환 하고이 기능의 경로는 /api/users 입니다.getChats 활성 그룹 채팅 목록을 반환 하고이 기능의 경로는 /api/chats 입니다. State는 state.js 로 처리됩니다. State.js는 사용자 및 채팅을위한 State CRUD를 지원하는 ES6 모듈 내보내기 기능입니다. 이 모듈은 Azure 테이블과의 모든 상호 작용을 수행하고 비교적 투명한 인터페이스를 제공하므로 다른 스토리지 백엔드를 교체 할 수 있습니다.
Azure Web Pubsub 및 이벤트 처리기를 통해 클라이언트와 서버간에 두 가지 방법이 있습니다.
json.webpubsub.azure.v1 서브 프로토콜은 기본 웹 소켓 대신 사용되며 여러 기능을 제공합니다. 사용자는 그룹에 추가 할 수 있고, 고객은 사용자 정의 이벤트 ( type: event 사용)를 보낼 수 있으며 다른 클라이언트에게 직접 메시지를 보낼 수 있습니다. 서버를 통해 가지 않고 ( type: sendToGroup 사용)
참고 :
이벤트 및 채팅은 json.webpubsub.azure.v1 서브 프로토콜을 사용하여 전송됩니다
클라이언트에서 전송 된 채팅 메시지는 sendToGroup 사용하고 3 개의 필드 message 포함 된 사용자 정의 JSON 페이로드 fromUserId & fromUserName ,이 메시지는 Azure Web PubSub에 의해 클라이언트로 클라이언트로 전달됩니다. 서버는 다음과 같습니다.
{
type : 's endToGroup ',
group : < chatId > ,
dataType : 'j son ',
data : {
message : < message text > ,
fromUserId : < userId > ,
fromUserName : < userName > ,
},
} 백엔드 서버로 향하는 이벤트는 event 유형과 동일한 서브 프로토콜을 통해 클라이언트의 웹 소켓 메시지로 전송되고 응용 프로그램 별 하위 유형 (예 :
{
type : 'e vent ',
event : 'j oinChat ',
dataType : 't ext ',
data : < chatId > ,
}이벤트 유형은 다음과 같습니다.
백엔드 API eventHandler 기능에는 이러한 각 사용자 이벤트에 대한 사례와 연결 및 연결 해제 시스템 이벤트를위한 핸들러가 있습니다.
서버에서 전송 된 메시지에는 다음과 같이 사용자 정의 chatr 앱 특정 페이로드가 있습니다.
{
chatEvent : < eventType > ,
data : < JSON object type dependant >
} 여기서 eventType 다음 중 하나입니다.
client/js/app.js 의 클라이언트 코드는 클라이언트가 수신 한 대로이 메시지를 처리하고 그에 따라 반응합니다.
이 프로젝트의 계획은 Azure Web PubSub 및 Azure 정적 웹 앱을 사용하고 정적 웹 앱 API 지원 (실제로 Azure Functions in the Hood)의 서버리스 기능 세트로 서버 측 구성 요소를 호스팅하는 것이 었습니다. Azure 정적 웹 앱은 코드리스 및 구성이없는 사용자 로그인 및 인증에 대한 놀라운 지원을 제공하기 때문에 선택되었습니다.
이 접근법에 대한 의견 :
webPubSubConnection 바인딩을 사용하는 대신 Webhook 이벤트 핸들러 역할을 수행하기 위해 표준 HTTP 함수를 만들 수 있습니다. Web PubSub로 다시 메시지를 보내려면 서버 SDK를 webPubSub 출력 바인딩을 사용하지 않고 기능 코드 내에서 간단히 사용할 수 있습니다. Azure 테이블의 상태는 chats 및 users 라는 이름의 두 테이블 (컬렉션)으로 구성됩니다.
각 채팅에는 멤버 필드 내부에 중첩 된 객체가 포함되어 있으므로 각 채팅은 data 라는 필드에 JSON 문자열로 저장됩니다. 파티션 키는 사용되지 않고 "chatr"문자열로 하드 코딩됩니다. 데이터 객체 내부의 Rowkey와 ID 필드는 동일합니다.
채팅 데이터 엔티티의 예
{
"id" : " eab4b030-1a3d-499a-bd89-191578395910 " ,
"name" : " This is a group chat " ,
"members" : {
"0987654321" : {
"userId" : " 0987654321 " ,
"userName" : " Another Guy "
},
"1234567890" : {
"userId" : " 1234567890 " ,
"userName" : " Ben "
}
},
"owner" : " 1234567890 "
}사용자는 아래에 설명 된 필드 (열)가있는 엔티티로 저장됩니다. 중첩 된 필드가 없으므로 JSON 문자열로 인코딩 할 필요가 없습니다. 다시 파티션 키는 사용되지 않고 문자열 "chatr"로 하드 코딩됩니다.
userId 필드는 정적 웹 앱에서 반환되었습니다.twitter , aad 또는 github 로 가입 한 사용자가 제공 한 인증makefile을 참조하십시오
$ make
help This help message
lint ? Lint & format, will not fix but sets exit code on error
lint-fix Lint & format, will try to fix errors and modify code
run ? Run server locally using Static Web Apps CLI
clean ? Clean up project
deploy Deploy everything to Azure using Bicep
tunnel ? Start loophole tunnel to expose localhost
구성 요소 수와 그 사이의 구성으로 인해 배포는 약간 복잡합니다. MakeFile 대상 deploy 배포/ 폴더에있는 이두근 템플릿을 사용하여 단일 단계로 모든 것을 배포해야합니다.
자세한 내용 및 지침은 배포 폴더의 readme를 참조하십시오
Azure Web PubSub 서비스가 위치 시스템의 HTTP 엔드 포인트를 호출 할 수 있어야하므로 터널이 사용되었으므로 약간의 노력이 필요합니다.
로컬로 실행할 때 정적 웹 앱 CLI가 사용되며 이는 가짜 사용자 인증 엔드 포인트를 제공합니다.
단계의 요약은 다음과 같습니다.
api/local.settings.sample.json api/local.settings.json 으로 복사하고 필요한 설정 값을 편집하십시오.loophole http 7071 --hostname chatrhttps://{{hostname-of-tunnel-service}}/api/eventHandler 넣습니다make runhttp://localhost:4280/index.html 엽니 다
