返回

聊天室开发小技巧：Websocket 如何打造实时交互？

前端

前言

在上一篇文章《有了 HTTP 协议，为什么还需要 Websocket？》中，我们介绍了 Websocket 的特点和通信原理。相信你已经对 Websocket 有了一个初步的了解。那么，现在我们就来看看 Websocket 服务端与客户端的实现吧！

Websocket 服务端实现

首先，我们需要搭建一个 Websocket 服务端。这里以 Node.js 为例，向你展示如何使用 Express.js 和 Socket.IO 来搭建一个简单的聊天室服务端。

  1. 安装依赖
npm install express socket.io
  1. 创建服务端文件
// 引入依赖
const express = require('express');
const socketIO = require('socket.io');

// 创建 Express 应用
const app = express();

// 设置静态文件路径
app.use(express.static('public'));

// 创建 HTTP 服务器
const server = app.listen(3000);

// 将 Socket.IO 应用到 HTTP 服务器
const io = socketIO(server);

// 监听客户端连接
io.on('connection', (socket) => {
  console.log('新客户端已连接：', socket.id);

  // 监听客户端发送的消息
  socket.on('message', (msg) => {
    console.log('收到客户端消息：', msg);

    // 将消息广播给所有客户端
    io.emit('message', msg);
  });

  // 监听客户端断开连接
  socket.on('disconnect', () => {
    console.log('客户端已断开连接：', socket.id);
  });
});
  1. 启动服务端
node server.js

Websocket 客户端实现

接下来，我们需要创建一个 Websocket 客户端。这里以 JavaScript 为例，向你展示如何使用 Socket.IO 来连接到聊天室服务端。

  1. 在 HTML 文件中添加以下脚本：
<script src="/socket.io/socket.io.js"></script>
<script>
  // 创建 Socket.IO 客户端
  const socket = io();

  // 连接到聊天室服务端
  socket.on('connect', () => {
    console.log('已连接到聊天室服务端');

    // 监听服务器端发来的消息
    socket.on('message', (msg) => {
      console.log('收到服务器端消息：', msg);
    });
  });

  // 发送消息到服务器端
  function sendMessage(msg) {
    socket.emit('message', msg);
  }
</script>
  1. 在 JavaScript 文件中调用 sendMessage() 函数发送消息：
// 发送消息
sendMessage('Hello, world!');

聊天室应用演示

现在，我们已经搭建好了一个简单的聊天室服务端和客户端。你可以在浏览器中打开 HTML 文件，然后在命令行中运行服务端程序。你就可以看到聊天室应用已经可以正常工作了！

结语

通过这篇教程，你已经学会了如何使用 Websocket 来搭建一个简单的聊天室。相信你现在已经对 Websocket 有了更深入的了解。如果你想进一步学习 Websocket，可以参考以下资源：

希望本文对你有帮助！