Socket.io 使用 WebSocket 实现双向通信的方法-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代前端开发中，实现即时通讯功能是常见的需求。而实现即时通讯需要实现双向通信，而 WebSocket 可以满足我们的需求。本文将介绍 Socket.io 使用 WebSocket 实现双向通信的方法。

Socket.io 简介

Socket.io 是一个基于事件的实时双向通信库。它可以在浏览器和服务器之间建立双向通信，通过事件的方式传递消息，可以在客户端和服务器之间实现实时通信。

WebSocket 简介

WebSocket 是一种在单个 TCP 连接上进行全双工通信的协议，它提供了一种在 Web 浏览器和服务器之间进行实时和双向通信的标准方法。WebSocket 是一个基于 TCP 的协议，它通过“握手”的过程建立初始连接，并支持完整的双向通信。

使用 Socket.io 实现 WebSocket

Socket.io 本身并不是 WebSocket 协议的实现，Socket.io 封装了 WebSocket、Ajax 等协议，提供了统一的接口来处理实时双向通信。使用 Socket.io 实现 WebSocket 需要先启动一个 WebSocket 服务器，然后客户端和服务器之间建立连接，发送和接收事件。

服务器

在服务器端，需要使用 socket.io 安装包来启动 WebSocket 服务器。

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

const app = express();
const server = http.createServer(app);
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');
});

上述代码中，使用 socketIo(server) 方法来创建一个新的 Socket.io 实例，并设置 connection 事件监听器，在客户端和服务器建立连接时被触发。在 connection 事件监听器函数中，使用 socket 变量表示当前连接的客户端，通过 socket.on('event') 监听客户端发送的事件，使用 socket.emit('event') 发送事件到客户端。

客户端

在客户端，需要使用 socket.io-client 安装包来建立和服务器的连接。

// javascriptcn.com 代码示例
<script src="/socket.io/socket.io.js"></script>
<script>
  var socket = io();

  socket.on('connect', () => {
    console.log('connected');
  });

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

上述代码中，通过引入 socket.io.js 文件来建立和服务器的连接，使用 var socket = io() 创建 socket 对象，使用 socket.on('event') 监听服务器发送的事件，使用 socket.emit('event') 向服务器发送事件。

总结

本文介绍了 Socket.io 使用 WebSocket 实现双向通信的方法，通过示例代码讲解了服务器和客户端的实现方式。WebSocket 提供了一种可靠快速的实时通信方式，在实现实时通信的时候可以选择 Socket.io 来简化开发。

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