To implement a real-time chat application using WebSockets in TypeScript, we'll use the following technologies:

1. Node.js with Express for the backend server
2. Socket.IO for WebSocket communication
3. MongoDB to store chat history

First, let's set up our project and install the necessary dependencies.

1. Initialize a new Node.js project:
```
npm init -y
```

2. Install TypeScript and its required packages:
```
npm install typescript ts-node @types/node --save-dev
```

3. Create a `tsconfig.json` file to configure TypeScript:
```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

4. Install Express, Socket.IO, and MongoDB related packages:
```
npm install express socket.io mongodb @types/express @types/socket.io
```

Now, let's create our application structure:

- src/
  - index.ts
  - app.ts
  - chatController.ts
  - database.ts

Let's start by setting up our Express server and configuring Socket.IO in `app.ts`:

```typescript
// src/app.ts

import express from 'express';
import { Server } from 'socket.io';
import { createServer } from 'http';

const app = express();
const server = createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // Handle chat events here

  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

export default server;
```

Next, let's set up our MongoDB connection in `database.ts`:

```typescript
// src/database.ts

import { MongoClient } from 'mongodb';

const uri = 'mongodb://localhost:27017';
const dbName = 'chat-app';

export const connectToDB = async () => {
  try {
    const client = new MongoClient(uri);
    await client.connect();
    console.log('Connected to MongoDB');
    return client.db(dbName);
  } catch (error) {
    console.error('Error connecting to MongoDB', error);
    process.exit(1);
  }
};
```

Now, let's create a chat controller for handling messages and storing them in the database in `chatController.ts`:

```typescript
// src/chatController.ts

import { Socket } from 'socket.io';
import { Db } from 'mongodb';
import { connectToDB } from './database';

let db: Db;

(async () => {
  db = await connectToDB();
})();

interface Message {
  username: string;
  content: string;
  timestamp: Date;
}

export const handleChatEvents = (socket: Socket) => {
  socket.on('message', async (msg: Message) => {
    // Save message to database
    await db.collection('messages').insertOne(msg);

    // Broadcast message to all connected clients
    socket.broadcast.emit('message', msg);
  });
};
```

Next, update `app.ts` to use the chat controller:

```typescript
// src/app.ts

import express from 'express';
import { Server } from 'socket.io';
import { createServer } from 'http';
import { handleChatEvents } from './chatController';

const app = express();
const server = createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  handleChatEvents(socket);

  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

export default server;
```

Finally, let's create our entry point `index.ts`:

```typescript
// src/index.ts

import app from './app';

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
```

Now you can run your application using the following command:

```
npx ts-node src/index.ts
```

This will start a WebSocket server that listens for chat messages and stores them in MongoDB. To build a frontend client to interact with this server, you can use any popular frontend framework like React, Angular, or Vue along with the Socket.IO client library.

Don't forget to add scripts to your `package.json` file to make it easier to run and build your project:

```json
"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "serve": "node dist/index.js"
}
```
타입스크립트에서 웹소켓을 사용하여 실시간 채팅 애플리케이션을 구현하기 위해 다음 기술을 사용합니다:

1. 백엔드 서버를 위한 Express가 포함된 Node.js
2. 웹소켓 통신을 위한 Socket.IO
3. 채팅 기록을 저장하기 위한 몽고DB

먼저 프로젝트를 설정하고 필요한 종속성을 설치해 보겠습니다.

1. 새 Node.js 프로젝트를 초기화합니다:
```
npm init -y
```

2. TypeScript 및 필요한 패키지를 설치합니다:
```
npm install typescript ts-node @types/node --save-dev
```

3. `tsconfig.json` 파일을 생성하여 TypeScript를 구성합니다:
```json
{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules"]
}
```

4. Express, Socket.IO, MongoDB 관련 패키지를 설치합니다:
```
npm install express socket.io mongodb @types/express @types/socket.io
```

이제 애플리케이션 구조를 만들어 보겠습니다:

- src/
  - index.ts
  - app.ts
  - chatController.ts
  - database.ts

Express 서버를 설정하고 `app.ts`에서 Socket.IO를 구성하는 것으로 시작해 보겠습니다:

```typescript
// src/app.ts

import express from 'express';
import { Server } from 'socket.io';
import { createServer } from 'http';

const app = express();
const server = createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  // Handle chat events here

  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

export default server;
```

다음으로 `database.ts`에서 몽고DB 연결을 설정해 보겠습니다:

```typescript
// src/database.ts

import { MongoClient } from 'mongodb';

const uri = 'mongodb://localhost:27017';
const dbName = 'chat-app';

export const connectToDB = async () => {
  try {
    const client = new MongoClient(uri);
    await client.connect();
    console.log('Connected to MongoDB');
    return client.db(dbName);
  } catch (error) {
    console.error('Error connecting to MongoDB', error);
    process.exit(1);
  }
};
```

이제 메시지를 처리하고 데이터베이스에 저장하기 위한 채팅 컨트롤러를 `chatController.ts`에 만들어 보겠습니다:

```typescript
// src/chatController.ts

import { Socket } from 'socket.io';
import { Db } from 'mongodb';
import { connectToDB } from './database';

let db: Db;

(async () => {
  db = await connectToDB();
})();

interface Message {
  username: string;
  content: string;
  timestamp: Date;
}

export const handleChatEvents = (socket: Socket) => {
  socket.on('message', async (msg: Message) => {
    // Save message to database
    await db.collection('messages').insertOne(msg);

    // Broadcast message to all connected clients
    socket.broadcast.emit('message', msg);
  });
};
```

다음으로, 채팅 컨트롤러를 사용하도록 `app.ts`를 업데이트합니다:

```typescript
// src/app.ts

import express from 'express';
import { Server } from 'socket.io';
import { createServer } from 'http';
import { handleChatEvents } from './chatController';

const app = express();
const server = createServer(app);
const io = new Server(server);

io.on('connection', (socket) => {
  console.log(`User connected: ${socket.id}`);

  handleChatEvents(socket);

  socket.on('disconnect', () => {
    console.log(`User disconnected: ${socket.id}`);
  });
});

export default server;
```

마지막으로 엔트리 포인트 `index.ts`를 만들어 보겠습니다:

```typescript
// src/index.ts

import app from './app';

const PORT = process.env.PORT || 3000;

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});
```

이제 다음 명령을 사용하여 애플리케이션을 실행할 수 있습니다:

```
npx ts-node src/index.ts
```

그러면 채팅 메시지를 수신하고 MongoDB에 저장하는 WebSocket 서버가 시작됩니다. 이 서버와 상호 작용하는 프론트엔드 클라이언트를 빌드하려면 Socket.IO 클라이언트 라이브러리와 함께 React, Angular 또는 Vue와 같은 널리 사용되는 프론트엔드 프레임워크를 사용할 수 있습니다.

프로젝트를 더 쉽게 실행하고 빌드할 수 있도록 `package.json` 파일에 스크립트를 추가하는 것을 잊지 마세요:

```json
"scripts": {
  "start": "ts-node src/index.ts",
  "build": "tsc",
  "serve": "node dist/index.js"
}
```