1. 安装Node.js和npm

在本地机器上安装Node.js和npm,可以在Node.js官方网站上下载安装包进行安装。

  1. 创建项目文件夹

在命令行中进入你想要创建项目的目录,执行以下命令:

mkdir chatroom
cd chatroom
  1. 初始化项目

执行以下命令,初始化一个空的Node.js项目:

npm init -y
  1. 安装依赖包

执行以下命令安装所需的依赖包:

npm install express socket.io
  1. 创建服务器

在项目中创建一个名为server.js的文件,用于创建服务器和处理socket连接:

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.use(express.static(__dirname + '/public'));

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

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

  socket.on('chat message', (msg) => {
    console.log('message: ' + msg);
    io.emit('chat message', msg);
  });
});

http.listen(3000, () => {
  console.log('listening on *:3000');
});
  1. 创建客户端

在项目中创建一个名为index.html的文件,用于创建客户端页面和处理socket连接:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Socket.IO Chat</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        font: 13px Helvetica, Arial;
      }
      form {
        display: flex;
        justify-content: center;
        margin-top: 10px;
      }
      input[type="text"] {
        width: 300px;
        padding: 10px;
        border: none;
        border-radius: 3px;
        font-size: 16px;
        background-color: #f6f6f6;
      }
      ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      li {
        margin: 5px 0;
      }
      label {
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <ul id="messages"></ul>
    <form action="">
      <label for="message">Message:</label>
      <input type="text" id="message" autocomplete="off">
      <button>Send</button>
    </form>
    <script src="/socket.io/socket.io.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
      $(() => {
        const socket = io();
        $('form').submit((e) => {
          e.preventDefault();
          const message = $('#message').val();
          socket.emit('chat message', message);
          $('#message').val('');
          return false;
        });
        socket.on('chat message', (msg) => {
          $('#messages').append($('<li>').text(msg));
        });
      });
    </script>
  </body>
</html>
  1. 运行服务器

在命令行中执行以下命令,启动Node.js服务器:

node server.js
  1. 打开客户端

在浏览器中打开 http://localhost:3000,即可访问聊天室页面。

  1. 开始聊天

在聊天框中输入消息,点击“Send”按钮或按下回车键发送消息。所有连接到服务器的客户端都将收到该消息。

以上就是一个简单的socket聊天室的搭建过程,你可以根据自己的需求进行扩展和优化

搭建socket聊天室

原文地址: http://www.cveoy.top/t/topic/ebcm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录