node.js基于socket.io快速实现一个实时通讯应用

下面详细讲解“node.js基于socket.io快速实现一个实时通讯应用”的完整攻略。

简介

Socket.io 是一个优秀的跨浏览器的 WebSocket 实现，它解决了 WebSocket 在使用过程中的兼容性问题，并且实现了多种应用级别的实时通信协议。使用 Node.js 和 Socket.io 可以快速实现一个实时通讯应用。

准备

首先，你需要安装 Node.js 和 Socket.io。

你可以在官网下载 Node.js 并安装。然后，在命令行界面输入以下命令安装 Socket.io：

npm install socket.io --save

实现

以下是一个简单的实时聊天应用的代码示例：

服务端代码

// 引入 socket.io
const io = require('socket.io')(server);

// 监听连接事件
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);
  });
});

客户端代码

<!doctype html>
<html>
<head>
  <title>Socket.io Chat</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="chat-form">
    <input id="message-input" autocomplete="off">
    <button>Send</button>
  </form>

  <script src="/socket.io/socket.io.js"></script>
  <script>
    // 创建 Socket.io 连接
    const socket = io();

    // 监听聊天消息事件
    socket.on('chat message', function(msg) {
      const item = document.createElement('li');
      item.textContent = msg;
      document.getElementById('messages').appendChild(item);
    });

    // 发送消息
    const form = document.getElementById('chat-form');
    form.addEventListener('submit', function(e) {
      e.preventDefault(); // 阻止页面刷新
      const input = document.getElementById('message-input');
      const msg = input.value;
      socket.emit('chat message', msg);
      input.value = '';
    });
  </script>
</body>
</html>

在本示例中，服务端监听连接事件，当有客户端连接时打印“a user connected”。监听聊天消息事件，在收到消息后广播给所有连接的客户端。客户端在页面加载完毕之后创建与服务端的 Socket.io 连接，监听聊天消息事件和表单的提交事件，在表单提交时发送消息。

示例说明

示例一：实时在线人数统计

可以通过监听连接和断开连接事件，来实时更新客户端在线人数。

服务端代码：

let onlineCount = 0;
io.on('connection', socket => {
  onlineCount++;
  io.emit('online count', onlineCount);
  socket.on('disconnect', () => {
    onlineCount--;
    io.emit('online count', onlineCount);
  });
});

客户端代码：

<p>在线人数: <span id="online-count"></span></p>
<script>
  socket.on('online count', count => {
    document.getElementById('online-count').textContent = count;
  });
</script>

示例二：实时推送新闻

可以在服务器端定时推送新闻，客户端定时向服务器请求新闻。

服务端代码：

// 模拟推送新闻
const news = ['news1', 'news2', 'news3'];
let index = 0;
setInterval(() => {
  io.emit('news', news[index]);
  index = (index + 1) % news.length;
}, 3000);

客户端代码：

<div id="news"></div>
<script>
  // 获取新闻
  const getNews = () => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', '/news');
    xhr.onload = () => {
      document.getElementById('news').textContent = xhr.responseText;
      setTimeout(getNews, 3000); // 定时请求新闻
    };
    xhr.send();
  };

  // 初始化新闻
  getNews();

  // 监听新闻事件
  socket.on('news', news => {
    document.getElementById('news').textContent = news;
  });
</script>

这样，在客户端打开页面的时候，会自动请求一遍最新的新闻，并定时请求最新的新闻。服务端会每隔一定时间推送一条最新新闻。所有在线的客户端都会同时收到这条新闻。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：node.js基于socket.io快速实现一个实时通讯应用 - Python技术站

node.js基于socket.io快速实现一个实时通讯应用

简介

准备

实现

示例说明

示例一：实时在线人数统计

示例二：实时推送新闻

相关文章