从零开始：Socket.io 实现 Websocket 的入门教程-JavaScript中文网-JavaScript教程资源分享门户

简介

Websocket 是一种基于 TCP 协议的双向通信协议，用于实现客户端和服务端之间的实时通信，可以用于实现即时聊天、实时数据更新等应用场景。Socket.io 是一个基于 Websocket 的实时通信库，它可以在客户端和服务端之间建立实时连接，并提供了易于使用的 API，使得开发者可以轻松地实现实时通信功能。

本文将介绍如何使用 Socket.io 实现 Websocket 的入门教程，包括 Socket.io 的安装和基本用法，以及一个简单的聊天室示例。

安装 Socket.io

首先，我们需要安装 Socket.io。在 Node.js 环境下，可以通过 npm 安装：

npm install socket.io

基本用法

在服务端使用 Socket.io 非常简单，只需要在服务器代码中引入 Socket.io，然后在 HTTP 服务器上调用 io 函数即可建立 Websocket 连接。以下是一个简单的例子：

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

const server = http.createServer();
const io = socketIO(server);

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

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在上面的代码中，我们首先创建了 HTTP 服务器，然后使用 Socket.io 创建了一个 Websocket 服务器。在 connection 事件中，我们可以监听到客户端连接事件，然后在 disconnect 事件中监听客户端断开连接事件。

在客户端使用 Socket.io 也非常简单，只需要在 HTML 文件中引入 Socket.io 客户端库，然后使用 io 函数连接到 Websocket 服务器即可。以下是一个简单的例子：

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.io Example</title>
</head>
<body>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    socket.on('connect', () => {
      console.log('connected to server');
    });
    socket.on('disconnect', () => {
      console.log('disconnected from server');
    });
  </script>
</body>
</html>

在上面的代码中，我们首先引入了 Socket.io 客户端库，然后使用 io 函数连接到 Websocket 服务器。在 connect 事件中，我们可以监听到连接成功事件，然后在 disconnect 事件中监听断开连接事件。

聊天室示例

下面我们来实现一个简单的聊天室示例，演示如何使用 Socket.io 实现实时聊天功能。

服务端代码

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

const server = http.createServer();
const io = socketIO(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);
  });
});

server.listen(3000, () => {
  console.log('listening on *:3000');
});

在上面的代码中，我们增加了一个 chat message 事件，用于监听客户端发送的消息。当客户端发送消息时，我们使用 io.emit() 方法将消息广播给所有客户端。

客户端代码

// javascriptcn.com 代码示例
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Socket.io Chat Room</title>
</head>
<body>
  <ul id="messages"></ul>
  <form id="chat-form">
    <input id="chat-input" autocomplete="off">
    <button>Send</button>
  </form>
  <script src="/socket.io/socket.io.js"></script>
  <script>
    const socket = io();
    const chatForm = document.getElementById('chat-form');
    const chatInput = document.getElementById('chat-input');
    const messages = document.getElementById('messages');

    chatForm.addEventListener('submit', (e) => {
      e.preventDefault();
      const message = chatInput.value;
      chatInput.value = '';
      socket.emit('chat message', message);
    });

    socket.on('chat message', (msg) => {
      const li = document.createElement('li');
      li.textContent = msg;
      messages.appendChild(li);
    });
  </script>
</body>
</html>

在上面的代码中，我们增加了一个表单用于输入消息，并监听表单的 submit 事件。当用户提交表单时，我们使用 socket.emit() 方法将消息发送给服务器。同时，我们还监听了 chat message 事件，用于接收服务器广播的消息，并将消息显示在页面上。

总结

本文介绍了如何使用 Socket.io 实现 Websocket 的入门教程，包括 Socket.io 的安装和基本用法，以及一个简单的聊天室示例。Socket.io 提供了易于使用的 API，使得开发者可以轻松地实现实时通信功能。希望本文对您有所帮助。

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