Heroku 上的 Socket.io：客户端代码

Java

使用 Heroku 上的 Socket.io 构建实时通信应用

在现代的网络应用中，实时通信变得越来越重要。而 Socket.io 是一个基于 WebSockets 的 JavaScript 库，可以帮助我们轻松地构建实时通信应用。在本文中，我们将介绍如何在 Heroku 上使用 Socket.io 构建一个简单的实时聊天应用。

准备工作

在开始之前，我们需要确保我们已经完成了以下准备工作：

1. 一个 Heroku 账户：我们将使用 Heroku 来部署我们的应用。如果你还没有 Heroku 账户，你可以在官网上注册一个免费账户。

2. Node.JS 和 npm：我们将使用 Node.JS 来运行我们的应用，并使用 npm 来管理我们的依赖。

3. 一个文本编辑器：你可以使用任何你喜欢的文本编辑器来编写代码。我个人推荐使用 Visual Studio Code 或 Sublime Text。

创建项目

首先，我们需要创建一个新的目录来存放我们的项目。在终端中，使用以下命令创建一个新的目录并进入：

mkdir socket-io-chat
cd socket-io-chat

接下来，我们需要创建一个新的 package.JSon 文件来管理我们的项目依赖。在终端中运行以下命令：

npm init -y

这将创建一个默认的 package.JSon 文件。

安装 Socket.io

接下来，我们需要安装 Socket.io。在终端中运行以下命令：

npm install socket.io

这将安装 Socket.io 并将其添加到我们的 package.JSon 文件的依赖项中。

创建服务器

现在，我们可以开始编写我们的服务器代码了。在项目目录中创建一个新的文件 server.JS，并在其中添加以下代码：

Javascript
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);
app.use(express.static('public'));
io.on('connection', (socket) => {
  console.log('A user connected');
  socket.on('disconnect', () => {
    console.log('A user disconnected');
  });
  socket.on('chat message', (msg) => {
    console.log('Received message:', msg);
    io.emit('chat message', msg);
  });
});
server.listen(process.env.PORT || 3000, () => {
  console.log('Server listening on port 3000');
});

在这段代码中，我们首先创建一个 Express 应用，并将其与 Socket.io 结合在一起。然后，我们使用 express.static 中间件将 public 目录设置为静态文件目录，以便可以加载客户端代码。

接下来，我们通过 io.on('connection', ...) 监听来自客户端的连接事件，并在连接建立时打印一条消息。我们还监听来自客户端的 disconnect 事件，并在连接断开时打印一条消息。

最后，我们监听来自客户端的 chat message 事件，并将接收到的消息广播给所有连接的客户端。

创建客户端

现在，我们需要创建一个用于展示实时聊天的客户端页面。在项目目录中创建一个新的目录 public，并在其中创建一个新的文件 index.html。在 index.html 中添加以下代码：

html
<!DOCTYPE html>
<html>
<head>
  <title>Socket.io Chat</title>
  <script src="/socket.io/socket.io.JS"></script>
  <script src="JS">https://code.jquery.com/jquery-3.6.0.min.JS</a>"></script>
</head>
<body>
  <ul id="messages"></ul>
  <form id="chat-form">
    <input id="message-input" autocomplete="off" />
    <button type="submit">Send</button>
  </form>
  <script>
    const socket = io();
    $('#chat-form').submit((e) => {
      e.preventDefault();
      const msg = $('#message-input').val().trim();
      if (msg !== '') {
        socket.emit('chat message', msg);
        $('#message-input').val('');
      }
    });
    socket.on('chat message', (msg) => {
      $('#messages').append($('<li>').text(msg));
    });
  </script>
</body>
</html>

在这段代码中，我们首先引入了 Socket.io 和 jQuery 的库文件。然后，我们在页面中创建了一个用于显示聊天消息的

元素和一个用于发送消息的表单。
接下来，我们使用 io() 创建一个与服务器的连接，并在表单提交时发送消息。我们还监听来自服务器的 chat message 事件，并在收到消息时将其显示在页面上。
部署应用
现在，我们已经完成了服务器和客户端的代码编写，我们可以将我们的应用部署到 Heroku 上了。
1. 在项目目录中，使用以下命令将我们的代码提交到 Git 仓库中：

git init
git add .
git commit -m "Initial commit"

2. 在终端中运行以下命令，使用 Heroku CLI 创建一个新的 Heroku 应用：

heroku create

3. 使用以下命令将我们的应用推送到 Heroku：

git push heroku mAIn

4. 最后，使用以下命令打开我们的应用：

heroku open

恭喜！现在我们的实时聊天应用已经部署到 Heroku 上了。你可以尝试在多个浏览器窗口中打开应用，并开始实时聊天。
在本文中，我们学习了如何使用 Socket.io 构建一个简单的实时聊天应用，并将其部署到 Heroku 上。Socket.io 提供了一个简单而强大的工具，可以帮助我们实现实时通信功能。希望这篇文章对你有所帮助，祝你在构建实时通信应用的过程中取得成功！
参考代码：https://dev.to/nia_001/socket-io-client-code-on-heroku-2g4b