socket.io：在同一个 HTML 页面中正确更改房间并实现聊天答案

【问题标题】：socket.io: correctly change rooms and implement chat in the same HTML pagesocket.io：在同一个 HTML 页面中正确更改房间并实现聊天
【发布时间】：2017-08-21 09:35:40
【问题描述】：

问题：我必须通过使用 socket.io 更改房间的选项来实现聊天。我尝试在客户端使用单个 HTML 文件来完成此操作，但来自不同房间的客户端在同一个文本区域中写入，因此 房间无法工作。这就是为什么我创建 2 个单独的 HTML 页面只是为了让我的房间正常工作。

它工作得很好，但我想要一个更巧妙的解决方案：将所有客户端逻辑放在一个 HTML 文件中。

这是我的服务器端代码，chat.js：

"use strict";
let app = require('express')();
let server = require('http').Server(app);
let io = require('socket.io')(server);

app.get('/', (req, res) => {
  res.sendFile(__dirname + "/logs/chat2.html");
});

app.get("/room", (req, res) => {
  res.sendFile(__dirname + "/logs/chat.html");
});

io.on("connect", (socket) => {
  // Notify about a new user
  socket.emit("userSelfNotification", {text: "--SELF-- You successfully entered the server"});
  socket.broadcast.emit("newUserNotification", {text: "--BROADCAST-- New user joined the server"});
  // Send message
  socket.on("message", (message) => {
    io.sockets.emit("newMessage", {text: message});
  });
  socket.on("changeRoom", (socket, message) => {
    socket.join(message.roomUri);
    socket.leave("/");
  });
});

// Create a new room
const room = io.of("/room");

room.on("connect", (socket) => {
  socket.emit("userSelfChangeNotification", {text: "--SELF-- You successfully changed the room"});
  socket.broadcast.emit("newUserNotification", {text: "--BROADCAST-- New user joined the room"});
  socket.on("message", (message) => {
    room.emit("newMessage", {text: message});
  });
});

server.listen(3000);

我的主房间代码，mainRoom.html：

<!DOCTYPE html>
<html lang="eng">
<head>
    <meta charset="UTF-8">
    <title>Chat</title>
<script src="https://code.jquery.com/jquery-3.1.0.min.js" charset="utf-8"></script>
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
<script>
  let socket = io.connect('http://localhost:3000');
  socket.on("userSelfNotification", (message)=> {
    $("textarea").val($("textarea").val() + message.text + "\n");
  });
  socket.on("newUserNotification", (message) => {
    $("textarea").val($("textarea").val() + message.text + "\n");
  });
  socket.on("newMessage", (message) => {
    $("textarea").val($("textarea").val() + message.text + "\n");
  });
</script>
</head>
<body>
<textarea name="name" rows="8" cols="40"></textarea>
<p></p>
<input type="text" name="text" size="20">
<button type="button" name="button">Send</button>
<button type="button" onclick="location.href='http://localhost:3000/room';" name="changeRoomButton">Change room</button>

<script>
  $(document).on('click', 'button', () => {
    let message = $('input').val();
    socket.emit("message", message);
    $('input').val(null);
  });
  $(document).on("click", "changeRoomButton", () => {
    socket.emit("changeRoom", {roomUri: "/room"});
  });
</script>
</body>
</html>

我的第二个房间代码几乎相同，除了我连接到房间 URL 的那一行：

let socket = io('http://localhost:3000/room');

问题：如何将 2 个房间合并为 1 个 HTML 文件？

【问题讨论】：

标签： javascript html node.js sockets socket.io

【解决方案1】：

我会简单地为加入和离开房间创建服务器端事件。所以你可以

在连接前添加一个额外的步骤来定义要加入的房间
或连接到默认的“/”房间，然后发回一个列表可能加入的房间。

因此，您需要制作客户端事件以发出“订阅”（加入）和“取消订阅”（离开）房间，然后服务器完成工作。

这里有我为 server-side socket.io joining/leaving rooms

提供的答案

您还应该知道，一个用户可以订阅多个房间，如果您愿意，可以通过在加入新房间时取消订阅当前房间来避免这种情况。

编辑：额外选项

如果您从节点（例如 express）为您的客户提供服务，您还可以在 GET 请求 (/chat/:room) 中创建 param，并且 :room 参数用于连接到该房间.

我仍然更喜欢连接到服务器，然后向客户端返回可能加入的房间列表。

【讨论】：

引用：您需要制作客户端事件以发出“订阅”（加入）和“取消订阅”（离开）房间，服务器完成工作。评论：我做到了，我有事件“changeRoom”在服务器上执行以下操作：1）socket.join（message.roomUri）； 2) socket.leave("/");