[讨论] Nodejs实时聊天实现。

[讨论] Nodejs实时聊天实现。

网上很多看到使用websocket可以很好地实现实时功能。除了兼容性之外，websocket就像是无敌了一样。但实际应用，很多项目也只是使用comet或者其他长轮询的实现而没有，那是为什么呢？

7 回复

[讨论] Node.js 实时聊天实现

在现代 Web 应用中，实时聊天是一个非常常见的需求。WebSocket 是一种流行的解决方案，因为它允许服务器和客户端之间建立持久连接，从而实现双向通信。然而，在某些情况下，开发者可能会选择使用其他技术，如 Comet 或长轮询（Long Polling）。本文将探讨这些技术，并提供一个简单的 WebSocket 实现示例。

为什么选择 WebSocket？

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议。它提供了低延迟、高效率的数据传输方式，非常适合实时应用。相比传统的 HTTP 轮询或 Comet 技术，WebSocket 不需要频繁地发起请求，从而减少了网络开销和服务器压力。

其他技术：Comet 和长轮询

尽管 WebSocket 非常强大，但在某些情况下，开发者可能选择其他技术：

  1. Comet：这是一种使用 HTTP 长连接的技术，通过保持连接打开来模拟实时通信。虽然它可以实现类似的效果，但它的实现复杂度较高，且可能遇到兼容性问题。
  2. 长轮询：在这种技术中，客户端向服务器发起请求，服务器保持连接打开直到有数据可用或超时。这种方法相对简单，但也可能导致较高的延迟和资源消耗。

示例代码：WebSocket 实现

以下是一个简单的 Node.js 实时聊天应用实现，使用了 ws 库来处理 WebSocket 通信。

  1. 安装依赖
npm install ws express
  1. 创建服务器
const WebSocket = require('ws');
const express = require('express');

const app = express();
const server = require('http').createServer(app);
const wss = new WebSocket.Server({ server });

wss.on('connection', (ws) => {
    console.log('Client connected');

    ws.on('message', (message) => {
        console.log(`Received: ${message}`);
        
        // 广播消息给所有连接的客户端
        wss.clients.forEach((client) => {
            if (client !== ws && client.readyState === WebSocket.OPEN) {
                client.send(message);
            }
        });
    });

    ws.on('close', () => {
        console.log('Client disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server is listening on port 3000');
});
  1. 客户端代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket Chat</title>
</head>
<body>
    <h1>WebSocket Chat</h1>
    <input id="input" type="text" placeholder="Type a message...">
    <button onclick="sendMessage()">Send</button>
    <ul id="messages"></ul>

    <script>
        const socket = new WebSocket('ws://localhost:3000');

        socket.onmessage = function(event) {
            const messages = document.getElementById('messages');
            const message = document.createElement('li');
            message.textContent = event.data;
            messages.appendChild(message);
        };

        function sendMessage() {
            const input = document.getElementById('input');
            socket.send(input.value);
            input.value = '';
        }
    </script>
</body>
</html>

总结

WebSocket 是实现实时聊天的理想选择，因为它提供了低延迟和高效的数据传输。然而，在某些特定场景下，开发者可能会选择其他技术。无论选择哪种技术，关键是根据应用的需求和环境来做出最佳决策。希望上述示例能帮助你快速入门 WebSocket 实时聊天应用的开发。


不知道, 不过用 WebSocket 也不完全就是好处, 一个坏处是没有回调, 完全消息的逻辑, 写起来不方便, 还有 Socket 连接一直连着会耗比 Ajax 多的服务端性能.

因为实际应用…没多少个能支持websocket…

你要看现在能支持websocket 的浏览器 IE 妥妥的全系列不能支持…而已现在的IE份额…你能抛弃这部分用户?

移动端…可能稍微好一些.ios 6 就原生支持了…不过,现在份额最大的android …android 4.4 才支持websocket…

你说实际应用怎么玩websocket…

我现在项目用的是socket.io实现的实时聊天功能，我封装了一层（封装了Room, 简单的事件绑定，Room内的广播），做业务逻辑还是蛮爽的。服务器是单独的只给这个应用使用的，平时有看到，资源占用也不多。暂时项目在线人数也不会很多，但老会出现奇怪问题。一段时间连接会自动断掉。看log也没有明显的报错。

目前做的改进都只限于应用级别的，非常郁闷…

撇除浏览器问题，实际应用十分不稳定。但看到文章都是赞美的不得了的，感觉十分无解。

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它使得客户端和服务器之间的数据交换变得更加简单，允许服务器主动向客户端推送数据。与传统的 HTTP 请求相比，WebSocket 能够更高效地实现服务器端到客户端的实时通信。

然而，在实际应用中，一些项目选择使用 Comet 或者长轮询技术，而不是 WebSocket，这主要有以下几个原因：

  1. 兼容性问题：尽管 WebSocket 的浏览器兼容性已经相当广泛，但在一些较老或特殊的浏览器环境中可能不被支持。因此，在需要广泛兼容性的场景下，开发者可能会选择其他替代方案。

  2. 安全性顾虑：WebSocket 默认使用 HTTP 端口（80）和 HTTPS 端口（443），但在某些情况下，这些端口可能受到防火墙的限制，或者出于安全考虑需要进行额外配置。相比之下，传统的 HTTP 请求更容易通过防火墙设置。

  3. 复杂度：WebSocket 需要在服务器端维护一个持久连接，并处理更多的细节。对于一些简单的应用场景，使用 Comet 或长轮询等方法实现起来可能更为简单直接。

下面是一个简单的 WebSocket 实现示例，基于 Node.js 和 ws 库。这个例子展示了如何创建一个基本的 WebSocket 服务器和客户端。

示例代码

首先安装依赖：

npm install ws

WebSocket 服务器 (server.js)

const WebSocket = require('ws');

const wss = new WebSocket.Server({ port: 8080 });

wss.on('connection', function connection(ws) {
  console.log('New client connected!');

  ws.on('message', function incoming(message) {
    console.log('Received: %s', message);
    // Echo the received message back to all clients, including the sender
    wss.clients.forEach(function each(client) {
      if (client !== ws && client.readyState === WebSocket.OPEN) {
        client.send(message);
      }
    });
  });

  ws.on('close', function close() {
    console.log('Client disconnected');
  });
});

WebSocket 客户端 (client.html)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>WebSocket Client</title>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
  const socket = new WebSocket('ws://localhost:8080');

  socket.onopen = function() {
    console.log('Connected to server!');
  };

  socket.onmessage = function(event) {
    console.log('Message from server ', event.data);
  };

  document.getElementById('sendButton').onclick = function() {
    const message = document.getElementById('messageInput').value;
    socket.send(message);
  };
});
</script>
</head>
<body>
<input type="text" id="messageInput" placeholder="Type a message...">
<button id="sendButton">Send</button>
</body>
</html>

在这个示例中，服务器监听来自客户端的消息，并将这些消息广播给所有已连接的客户端。客户端则可以通过输入框发送消息并接收从服务器发回的信息。

回到顶部