📗
smiley book
  • Smiley Books
  • AI
    • Readme
    • openai-whisper
      • 샘플 실행해보기
      • GPU 서버 준비하기
      • API로 whisper를 외부에 오픈하기
      • 프롬프트 지원
      • 실시간 message chat
      • 화면 이쁘게 만들기와 로그인
      • 파이썬 가상환경
      • 실시간 voice chat
      • fine tunning(미세 조정) 으로 성능 올리기
      • app에서 api를 호출하여 실시간으로 텍스트로 바꿔보기
    • ollama - llm을 쉽게 내컴에서 실행
      • ollama webui
      • ollama docker
    • stable diffusion
      • SDXL - text to image
      • SD-webui
    • ChatGPT
      • 답변이 끊길때
      • 역할을 정하자
      • 구체적인 질문
      • 결과형태를 지정
      • 프롬프트를 여러줄로 사용하자.
      • 마틴 파울러 글 번역본
    • Prompt Engineering
    • Auto-GPT
    • Gemini
      • google ai studio
      • gemini-api
      • embedding guide
    • Huggingface
      • huggingface 사용법
      • huggingface nlp 공부중
    • kaggle
      • download dataset
    • langchain
      • langchain을 공부하며 정리
      • basic
      • slackbot
      • rag
      • document-loader
      • website-loader
      • confluence
      • memory
      • function-call
      • langsmith
      • agent-toolkit
  • Ansible
    • templates vs files and jinja2
    • dynamic inventory
    • limit 옵션 강제하기
    • limit 사용후 gather_fact 문제
  • AWS
    • AWS CLI
    • EKS
      • cluster manage
      • ALB Controller
      • external-dns
      • fargate
    • ECR
    • S3
    • Certificate Manager
  • Azure
    • Azure AD OAuth Client Flow
  • Container
    • Registry
    • 빌드시에 env값 설정하기
  • DB
    • PXC
      • Operator
      • PMM
      • 삭제
      • GTID
      • Cross Site Replication
    • Mssql
    • Mysql
  • dotnet
    • Thread Pool
    • Connection Pool
    • Thread Pool2
  • Devops
    • Recommendation
  • GIT
    • Basic
    • Submodule
  • GitHub
    • Repository
    • GitHub Action
    • GitHub PR
    • Self Hosted Runner
    • GitHub Webhook
  • GitLab
    • CI/CD
    • CI/CD Advance
    • Ssl renew
    • CI/CD Pass env to other job
  • Go Lang
    • 개발 환경 구축
    • multi os binary build
    • kubectl같은 cli만들기
    • azure ad cli
    • embed static file
    • go study
      • pointer
      • module and package
      • string
      • struct
      • goroutine
  • Kubernetes
    • Kubernetes는 무엇인가
    • Tools
    • Install with kubespray
    • Kubernetes hardening guidance
    • 11 ways not to get hacked
    • ArgoCD
      • Install
      • CLI
      • Repository
      • Apps
      • AWS ALB 사용
      • Notification slack
      • Backup / DR
      • Ingress
      • 2021-11-16 Github error
      • Server Config
      • auth0 인증 추가(oauth,OIDC)
    • Extension
      • Longhorn pvc
      • External dns
      • Ingress nginx
      • Cert Manager
      • Kube prometheus
    • Helm
      • Subchart
      • Tip
    • Loki
    • Persistent Volume
    • TIP
      • Job
      • Pod
      • Log
  • KAFKA
    • raft
  • KVM
    • kvm cpu model
  • Linux
    • DNS Bind9
      • Cert-Manager
      • Certbot
      • Dynamic Update
      • Log
    • Export and variable
    • Grep 사용법
  • Modeling
    • C4 model introduce
    • Mermaid
    • reference
  • Monitoring
    • Readme
    • 0. What is Monitoring
    • 1. install prometheus and grafana
    • 2. grafana provisioning
    • 3. grafana dashboard
    • 4. grafana portable dashboard
    • 5. prometheus ui
    • 6. prometheus oauth2
    • Prometheus
      • Metric type
      • basic
      • rate vs irate
      • k8s-prometheus
    • Grafana
      • Expolorer
    • Node Exporter
      • advance
      • textfile collector
  • Motivation
    • 3 Simple Rule
  • OPENNEBULA
    • Install(ansible)
    • Install
    • Tip
    • Windows vm
  • Reading
    • comfort zone
    • 배려
    • elon musk 6 rule for insane productivity
    • Feynman Technique
    • how to interview - elon musk
    • 경청
    • Readme
  • Redis
    • Install
    • Master-slave Architecture
    • Sentinel
    • Redis Cluster
    • Client programming c#
  • SEO
    • Readme
  • Security
    • criminalip.io
      • criminalip.io
  • Stock
    • robinhood-python
  • Terraform
    • moved block
    • output
  • vault
    • Readme
  • VS Code
    • dev container
    • dev container on remote server
  • Old fashione trend
    • curity
    • MAAS
      • Install maas
      • Manage maas
      • Tip
Powered by GitBook
On this page
  • architecture
  • clean up
  • plan
  • postman으로 websocket 테스트하기
  • fastapi에 websocket 만들기
  • webserver실행후 포스트맨으로 Test
  • frontend default project 만들기
  • message를 websocket으로 server와 주고 받기
  • web-socket.service.ts
  • app.component.html
  • app.component.ts
  • app.module.ts
  • 실행 확인
  • todo

Was this helpful?

  1. AI
  2. openai-whisper

실시간 message chat

Previous프롬프트 지원Next화면 이쁘게 만들기와 로그인

Last updated 2 years ago

Was this helpful?

realtime은 안해봣으므로 간단한 메세지 보내는 샘플을 먼저 해본다.

architecture

clean up

기존코드를 backend라는 폴더로 전부 이동 frontend폴더를 만들어서 사용할 예정

plan

  1. postman으로 websocket 테스트 (public echo websocket server : ws.kraken.com)

  2. websocket api 서버 만들기

  3. websocket api 서버 테스트하기(postman)

  4. frontend 기본프로젝트 만들기

  5. websocket으로 메세지 보내고 받기

대충 이런 과정으로 해보면 될듯

postman으로 websocket 테스트하기

open postman

click new

click websocket request

ws://ws.kraken.com

click connect

it works

fastapi에 websocket 만들기

Dockerfile에 다음 추가

RUN pip install fastapi[all]==0.95.1
RUN pip install uvicorn[standard]==0.21.1
RUN pip install webservices # 이거 추가

main.py

from fastapi import ... , WebSocket, WebSocketDisconnect
from datetime import datetime
import logging
import asyncio

logging.basicConfig(level=logging.INFO)
logger = logging.getLogger("FastAPI app")

app = FastAPI()

...


@app.websocket("/ws")
async def websocket_endpoint(websocket: WebSocket):
    await websocket.accept()

    while True:
        try:
            # Receive the JSON data sent by a client.
            data = await websocket.receive_json()
            # Some (fake) heavey data processing logic.
            logger.info("received data: "+data.get("message", ""))
            message_processed = await heavy_data_processing(data)
            # Send JSON data to the client.
            await websocket.send_json(
                {
                    "message": message_processed,
                    "time": datetime.now().strftime("%H:%M:%S"),
                }
            )
        except WebSocketDisconnect:
            logger.info("The connection is closed.")
            break

async def heavy_data_processing(data: dict):
    """Some (fake) heavy data processing logic."""
    await asyncio.sleep(2)
    message_processed = data.get("message", "").upper()
    return message_processed

간단히 설명하면 웹소켓으로 대기중이다가 연결이 되고 메세지가 오면 2초를 슬립햇다가 메세지를 대문자로 바꾸고 그걸 리턴해서 시간을 추가해서 브라우저로 보내준다.

webserver실행후 포스트맨으로 Test

ws://whisper/ws

click connect

메세지를 보내면 잘 돌아온다.

{
  "message": "aaa",
  "time": "aaa"
}

click send

double qoute을 주의하자.

backend에서 websocket은 준비가 된거같다. frontend에서 보내야할듯.

frontend default project 만들기

ng new frontend
cd frontend
npm i
ng serve -o

angular 15 installed

tag: v0.10를 확인

message를 websocket으로 server와 주고 받기

service 생성

cd src/app
ng g service service/WebSocket

파일이 생성되었다.

다음 코드를 확인해 보자.

web-socket.service.ts

import { Injectable } from '@angular/core';
import { webSocket, WebSocketSubject } from 'rxjs/webSocket';
import { environment } from '../../environments/environment';

interface MessageData {
  message: string;
  time?: string;
}

@Injectable({
  providedIn: 'root',
})
export class WebSocketService {
  private socket$!: WebSocketSubject<any>;
  public receivedData: MessageData[] = [];

  constructor() {}

  public connect(): void {
    if (!this.socket$ || this.socket$.closed) {
      this.socket$ = webSocket(environment.ws_url);

      this.socket$.subscribe((data: MessageData) => {
        this.receivedData.push(data);
      });
    }
  }

  sendMessage(message: string) {
    this.socket$.next({ message });
  }

  close() {
    this.socket$.complete();
  }
}

app.component.html

<!-- frontend/src/app/app.component.html -->
<h2>Send a message to the server:</h2>
<form (ngSubmit)="sendMessage(message); message = ''">
  <input [(ngModel)]="message" name="message" type="text" autocomplete="off" />
  <button type="submit" style="margin-left: 10px">Send</button>
</form>

<h2>Received messages from the server:</h2>
<ul>
  <li *ngFor="let data of wsService.receivedData">{{ data.time }}: {{ data.message }}</li>
</ul>
<router-outlet></router-outlet>

app.component.ts

//src\app\app.component.ts
import { Component, OnDestroy } from '@angular/core';
import { WebSocketService } from './services/web-socket.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent implements OnDestroy {
  message = '';

  constructor(public wsService: WebSocketService) {
    this.wsService.connect();
  }

  sendMessage(message: string) {
    this.wsService.sendMessage(message);
  }

  ngOnDestroy() {
    this.wsService.close();
  }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { WebSocketService } from './services/web-socket.service';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, FormsModule],
  providers: [WebSocketService],
  bootstrap: [AppComponent],
})
export class AppModule {}

실행 확인

cd frontend
ng serve -o

소문자가 대문자로 바귀어서 시간과 함께 오는것을 알수 잇다.

서버에서 2초를 강제로 기다리므로 조금 느리게 온다.

todo

이제 마이크 소리를 보내보자.