本次仅记录 websocket 与 swoole 配合打造一个小型的聊天室，功能简陋，但是可以作为一个很好的入门案例。 本来就是作为一个很小的案例来写的，包含的功能点也不是那多，索性就按照最最最低配置来搞。 能够显示聊天消息的聊天区，同时兼顾显示链接状态，当前是否连接成功，或者服务端是否断开连接，而前端不知道的状况。 一个输入框，纯粹的输入框 ? 点击按钮发送不刷新页面，同时清空当前输入框内容，就简单的一个 button 而已，点击执行，不支持回车发送。 收到消息，滚动条自动触底，这个功能在某些使用场景是方便的，但又会造成某些场景使用不方便，方便在于有新消息不需要人工滚动，不方便在于，可能你在看历史消息，它自动触底了…还需要根据自己实际需求优化一下下。 随机昵称，当然不需要保存，刷新即丢，在收到消息如果是自己发送的，则显示 [ 我 ] 在某某时候发送了某某消息，而不是显示昵称字符串。 直接粘贴复制的 因为是测试项目，所有的都是默认安装，在安装完之后，访问前端页面，使用 view 方法会报错，百度一下就有解决方案了。 参考文档：https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket 前端页面代码： JS 代码： 在服务器信息回执时，会有第一次连接回执，还是服务端发送消息回执的状态区别，通过 msgType 来分辨，如果是第一次连接的回执消息，则把 FD 做一个页面留存，并不显示在聊天消息区，如果收到的是消息回执，就直接显示到聊天消息区。 还有就是，前后端相互通信发送的东西，都是字符串性质最优，我前端处理的方法是先组合成一个对象，然后转 JSON 串。 服务端代码 代码齐全之后，接下来就只需要在控制台执行以下 PHP 文件就行。 然后前台直接访问你的网站地址，我的是本地 127.0.0.1 多开几个窗口模拟多个用户，然后发送消息测试即可： 你好，打工人。 代码很简单，难度不大，但是可以很简洁的反应出 webScoket 和 Swoole 的一种强大。
前言
项目简介
项目环境
composer create-project topthink/think tpcd tpcomposer require topthink/think-swoole
webSocket 的使用
其实，webSocket 就这些常用方法，也没啥特殊要求的，他就是作为一个保持连接，接收服务器状态的一个浏览器的 API 存在，非常简洁方便。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>打工人聊天室</title> <!--需要引入jq 文件--></head><style> .content { height: 400px; max-width: 400px; overflow: auto; border-radius: 5px; border: 1px solid #f0f0f0; }</style><body> <div id="content" class="content"> <p>聊天区域</p> </div> 你好打工人：<samp id="nickname">昵称</samp> <br> 本次连接FD: <samp id="fd-samp"></samp> <br> <input type="text" id="msg"> <input type="hidden" id="fd" value=""> <button id="send" onclick="send()">发送</button></body></html><script> //滚动条最底部 function scrolltest() { var div = document.getElementById("content"); div.scrollTop = div.scrollHeight; } var wsServer = 'ws://127.0.0.1:9502'; var websocket = new WebSocket(wsServer); var nickname = Math.random().toString(36).substr(2); thisFd = ''; $('#nickname').html(nickname); //点击发送 function send() { var msg = $('#msg').val(); var data = { 'nickname': nickname, 'fd': thisFd, 'data': msg } //生成json 方便后台接收以及使用 var data = JSON.stringify(data); websocket.send(data); //然后清空 $('#msg').val(''); } //链接成功 websocket.onopen = function (evt) { $("#content >p:last-child").after('<p> 服务器已连接,开始聊天吧 </p>'); }; //链接断开 websocket.onclose = function (evt) { $("#content >p:last-child").after('<p> 服务器已断开,请重新连接 </p>'); }; //收到服务器消息 websocket.onmessage = function (evt) { //握手成功后，会接受到服务端返回的fd ，msgType = 1 //字符串格式化成json var data = eval('(' + evt.data + ')'); // console.log(evt.data); switch (data.msgType) { case 1: thisFd = data.fd; $('#fd-samp').html(thisFd); $('#fd').val(thisFd); break; case 2: if (data.nickname == nickname) { data.nickname = '我'; } $("#content >p:last-child").after('<p>' + data.nickname + ' 在 ' + data.time + ' 说：<br>' + data.data + '</p>'); //接收到消息自动触底 scrolltest(); break; } }; //服务器异常 websocket.onerror = function (evt, e) { $("#content >p:last-child").after('<p> 服务器异常 </p>'); };</script>
服务端需要 callback 前端过来的消息，转成对象数据，然后增加点自定义数据直接原样返回，并且群发到前端。<?php //创建WebSocket Server对象，监听0.0.0.0:9502端口 $ws = new Swoole\WebSocket\Server('0.0.0.0', 9502); //监听WebSocket连接打开事件 $ws->on('open', function ($ws, $request){ $fd = $request->fd; $data = json_encode([ 'fd' => $request->fd, 'msgType' => 1 //代表第一次连接，前端处理fd ]); $ws->push($request->fd, $data); }); //监听WebSocket消息事件 $ws->on('message', function ($ws, $frame) { $stats = $ws->stats(); //格式化接收到json $data = json_decode($frame->data); // 原基础上不动，增加一些自定义 $data->msgType = 2; //代表服务器端回复 $data->time = date('Y-m-d H-i-s'); $data = json_encode($data); //因为是聊天室，所以包括自己都需要收到回执，就直接群发 swoole 提供 connections 方法 包含了所有在线的 fd foreach ($ws->connections as $conn_fd){ $ws->push($conn_fd,$data); } }); //监听WebSocket连接关闭事件 $ws->on('close', function ($ws, $fd) {// echo "client-{$fd} is closed\n"; }); $ws->start();
0
0
利用webSocket与Swoole打造一个小型聊天室
谨言慎行
发布时间：2020-11-09 20:01:10
|2324人浏览过
|来源于php中文网
原创
相关文章
Swoole项目如何部署到生产环境
Swoole如何处理WebSocket的握手过程
Swoole的Http\Response对象有哪些常用方法
Swoole怎么在Nginx后获取WebSocket的真实IP
Swoole怎么在WebSocket服务器中验证用户身份
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
JavaScript浏览器渲染机制与前端性能优化实践
本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开，系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理，以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例，帮助开发者理解浏览器底层工作原理，并掌握提升网页加载速度与交互体验的实用技巧。
1
2026.03.06
Rust内存安全机制与所有权模型深度实践
本专题围绕 Rust 语言核心特性展开，深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例，分析内存安全保障原理与零成本抽象优势，并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学，掌握在高性能与安全性并重场景中的工程实践能力。
21
2026.03.05
PHP高性能API设计与Laravel服务架构实践
本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开，重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景，深入分析性能瓶颈定位与优化思路，帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。
106
2026.03.04
AI安装教程大全
2026最全AI工具安装教程专题：包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好，附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新，收藏这一篇就够了，让AI安装不再报错！
50
2026.03.04
Swift iOS架构设计与MVVM模式实战
本专题聚焦 Swift 在 iOS 应用架构设计中的实践，系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例，帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。
87
2026.03.03
C++高性能网络编程与Reactor模型实践
本专题围绕 C++ 在高性能网络服务开发中的应用展开，深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例，帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。
27
2026.03.03
Golang 测试体系与代码质量保障：工程级可靠性建设
Go语言测试体系与代码质量保障聚焦于构建工程级可靠性系统。本专题深入解析Go的测试工具链（如go test）、单元测试、集成测试及端到端测试实践，结合代码覆盖率分析、静态代码扫描（如go vet）和动态分析工具，建立全链路质量监控机制。通过自动化测试框架、持续集成（CI）流水线配置及代码审查规范，实现测试用例管理、缺陷追踪与质量门禁控制，确保代码健壮性与可维护性，为高可靠性工程系统提供质量保障。
79
2026.02.28
Golang 工程化架构设计：可维护与可演进系统构建
Go语言工程化架构设计专注于构建高可维护性、可演进的企业级系统。本专题深入探讨Go项目的目录结构设计、模块划分、依赖管理等核心架构原则，涵盖微服务架构、领域驱动设计(DDD)在Go中的实践应用。通过实战案例解析接口抽象、错误处理、配置管理、日志监控等关键工程化技术，帮助开发者掌握构建稳定、可扩展Go应用的最佳实践方法。
61
2026.02.28
Golang 性能分析与运行时机制：构建高性能程序
Go语言以其高效的并发模型和优异的性能表现广泛应用于高并发、高性能场景。其运行时机制包括 Goroutine 调度、内存管理、垃圾回收等方面，深入理解这些机制有助于编写更高效稳定的程序。本专题将系统讲解 Golang 的性能分析工具使用、常见性能瓶颈定位及优化策略，并结合实际案例剖析 Go 程序的运行时行为，帮助开发者掌握构建高性能应用的关键技能。
50
2026.02.28
热门下载
相关下载
精品课程
相关推荐
/
热门推荐
/
最新课程
Go语言实战-Gin+WebSocket构建IM即时聊天Demo
共8课时 | 0.5万人学习
swoole入门物联网开发与实战
共15课时 | 1.3万人学习
swoole项目实战(第二季)
共15课时 | 1.3万人学习
