Node.js Socket.io 实时应用实战-JavaScript中文网-JavaScript教程资源分享门户

什么是 Socket.io？

Socket.io 是一个基于 Node.js 的实时应用程序框架，它允许服务器和客户端之间进行双向通信。Socket.io 提供了一个简单易用的 API，使得开发者可以快速地构建出实时应用程序，如在线聊天室、游戏等。

Socket.io 基于 WebSocket 实现，但是它也兼容旧版浏览器，因为它可以自动降级到轮询的方式。这意味着 Socket.io 可以在所有主流浏览器中运行，包括 IE6。

如何使用 Socket.io？

安装

首先，我们需要在 Node.js 中安装 Socket.io。可以使用 npm 命令进行安装：

npm install socket.io

服务器端代码

接下来，我们需要在服务器端实现 Socket.io 的逻辑。以下是一个简单的示例：

// javascriptcn.com 代码示例
const app = require('http').createServer(handler);
const io = require('socket.io')(app);

app.listen(3000);

function handler(req, res) {
  res.writeHead(200);
  res.end('Hello World');
}

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 服务器，并将其传递给 Socket.io。然后，我们监听 connection 事件，当有客户端连接时，就会触发该事件。在 connection 事件中，我们可以监听客户端发送的事件，并向客户端发送事件。

在上面的示例中，我们监听了 disconnect 事件和 chat message 事件。当客户端断开连接时，就会触发 disconnect 事件。当客户端发送 chat message 事件时，我们会打印出消息，并向所有客户端发送该消息。

客户端代码

接下来，我们需要在客户端实现 Socket.io 的逻辑。以下是一个简单的示例：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.io Example</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    socket.on('chat message', (msg) => {
      const li = document.createElement('li');
      li.textContent = msg;
      document.getElementById('messages').appendChild(li);
    });

    document.getElementById('send').addEventListener('click', () => {
      const input = document.getElementById('message');
      socket.emit('chat message', input.value);
      input.value = '';
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input id="message" type="text">
  <button id="send">Send</button>
</body>
</html>

在上面的代码中，我们首先引入了 Socket.io 的客户端库。然后，我们创建了一个 Socket.io 实例，并监听了 chat message 事件。当收到 chat message 事件时，我们会将消息添加到页面中。

在页面中，我们创建了一个文本框和一个按钮，用于发送消息。当用户点击发送按钮时，我们会将文本框中的内容发送给服务器。

实战示例

实时聊天室

下面我们来实现一个简单的实时聊天室。

服务器端代码

// javascriptcn.com 代码示例
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');

app.listen(3000);

function handler(req, res) {
  fs.readFile(__dirname + '/index.html',
    (err, data) => {
      if (err) {
        res.writeHead(500);
        return res.end('Error loading index.html');
      }

      res.writeHead(200);
      res.end(data);
    });
}

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);
  });
});

在上面的代码中，我们使用了 fs 模块读取了一个 HTML 文件，并将其返回给客户端。当客户端连接时，我们会监听 chat message 事件，并向所有客户端发送该消息。

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat Room</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    socket.on('chat message', (msg) => {
      const li = document.createElement('li');
      li.textContent = msg;
      document.getElementById('messages').appendChild(li);
    });

    document.getElementById('send').addEventListener('click', () => {
      const input = document.getElementById('message');
      socket.emit('chat message', input.value);
      input.value = '';
    });
  </script>
</head>
<body>
  <ul id="messages"></ul>
  <input id="message" type="text">
  <button id="send">Send</button>
</body>
</html>

在上面的代码中，我们创建了一个简单的页面，用于发送和接收消息。当收到 chat message 事件时，我们会将消息添加到页面中。当用户点击发送按钮时，我们会将文本框中的内容发送给服务器。

实时协作编辑器

下面我们来实现一个实时协作编辑器。

服务器端代码

// javascriptcn.com 代码示例
const app = require('http').createServer(handler);
const io = require('socket.io')(app);
const fs = require('fs');
const path = require('path');

app.listen(3000);

function handler(req, res) {
  const filePath = path.join(__dirname, req.url === '/' ? 'index.html' : req.url);
  const contentType = getContentType(filePath);

  fs.readFile(filePath, (err, content) => {
    if (err) {
      if (err.code === 'ENOENT') {
        res.writeHead(404);
        res.end('Not Found');
      } else {
        res.writeHead(500);
        res.end('Internal Server Error');
      }
    } else {
      res.writeHead(200, { 'Content-Type': contentType });
      res.end(content);
    }
  });
}

function getContentType(filePath) {
  const extname = path.extname(filePath);

  switch (extname) {
    case '.html':
      return 'text/html';
    case '.js':
      return 'text/javascript';
    case '.css':
      return 'text/css';
    default:
      return 'text/plain';
  }
}

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

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

  socket.on('text changed', (text) => {
    console.log('text changed: ' + text);
    io.emit('text changed', text);
  });
});

在上面的代码中，我们使用了 path 模块获取了请求的文件路径，并使用了 fs 模块读取了文件内容。当客户端连接时，我们会监听 text changed 事件，并向所有客户端发送该事件。

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.io Editor</title>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();

    const editor = document.getElementById('editor');
    editor.addEventListener('input', () => {
      socket.emit('text changed', editor.value);
    });

    socket.on('text changed', (text) => {
      editor.value = text;
    });
  </script>
</head>
<body>
  <textarea id="editor"></textarea>
</body>
</html>

在上面的代码中，我们创建了一个文本框，用于编辑文本。当文本框内容发生变化时，我们会将内容发送给服务器。当收到 text changed 事件时，我们会将文本框的内容更新为服务器发送的内容。

总结

通过本文的介绍，我们了解了 Socket.io 的基本使用方法，并实现了两个实战示例。Socket.io 是一个非常强大的实时应用程序框架，它可以帮助我们快速地构建出实时应用程序。无论你是开发在线聊天室、游戏还是实时协作编辑器，Socket.io 都是一个不错的选择。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653c62f07d4982a6eb68847c