ts实现一个简单聊天室

daylightk

已于 2023-10-06 11:46:03 修改

阅读量366

点赞数

文章标签： typescript javascript 前端前端框架

于 2023-10-06 11:44:33 首次发布

本文链接：https://blog.csdn.net/agui3717/article/details/133608523

版权

首先安装依赖项，在命令行中进入你的项目目录并运行以下命令：

npm init -y
npm install express socket.io

2. 创建一个新的 TypeScript 文件，例如 server.ts，并添加以下代码

import express, { Request, Response } from 'express';
import http from 'http';
import socketio from 'socket.io';

const app = express();
const server = http.createServer(app);
const io = socketio(server);

app.use(express.static('public'));

io.on('connection', (socket) => {
  console.log('A user connected');

  socket.on('chat message', (msg) => {
    console.log('Message:', msg);
    io.emit('chat message', msg); // 将接收到的消息广播给所有连接的客户端
  });

  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
});

app.get('/', (req: Request, res: Response) => {
  res.sendFile(__dirname + '/public/index.html'); // 返回聊天室的 HTML 页面
});

const PORT = process.env.PORT || 3000;
server.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}`);
});

3在与 server.ts 同级的目录下创建一个名为 public 的文件夹，并在该文件夹中创建一个名为 index.html 的文件，添加以下代码

<!DOCTYPE html>
<html>
<head>
  <title>Chat Room</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    function sendMessage() {
      const input = document.getElementById('message-input');
      const message = input.value.trim();
      
      if (message !== '') {
        socket.emit('chat message', message);
        input.value = '';
      }
    }
    
    socket.on('chat message', (msg) => {
      const p = document.createElement('p');
      p.textContent = msg;
      document.getElementById('messages').appendChild(p);
    });
  </script>
</head>
<body>
  <div id="messages"></div>
  <input type="text" id="message-input" />
  <button onclick="sendMessage()">Send</button>
</body>
</html>