基于 Swoole 实现简单的 WebSocket 服务器及客户端 | 快速入门 | Swoole 从入门到实战教程
Laravel 学院
文档
Laravel 8.x 中文文档
Laravel 7.x 中文文档
Laravel 6.x 中文文档
Laravel 5.8 中文文档
Laravel 5.7 中文文档
Laravel 5.6 中文文档
Laravel 5.5 中文文档
Laravel 5.4 中文文档
Laravel 5.3 中文文档
Laravel 5.2 中文文档
Laravel 5.1 中文文档
Lumen 中文文档
全栈教程
PHP 全栈工程师指南
PHP 入门到实战
Laravel 入门到精通
Vue.js 入门到实战
玩转 PhpStorm 教程
Laravel 博客入门项目
Laravel 微信小程序项目
Laravel 前后端分离项目
Swoole 入门到实战
Eloquent 性能优化实战
Redis 高性能实战系列
Laravel 新版本特性
PHP 新特性与最佳实践
Golang
Go 入门教程
Go Web 编程
Gin 使用教程
微服务开发
内功修炼
数据结构与算法
网络协议
微服务从入门到实践
高性能 MySQL 实战
高性能 Redis 实战
Laravel 消息队列实战
Laravel 从学徒到工匠
PHP 设计模式系列
名企面试指南
资源库
Laravel 资源大全
Laravel 开源项目
Laravel 扩展包
Laravel 资源下载
更多
博客 & 新闻
问答 & 讨论
Leetcode 题解
学院君读书笔记系列
关于 Laravel 学院
Laravel 互助学习群
Golang 互助学习群
更多
Laravel 中文文档
Laravel 全栈教程
Laravel 学习路径
Go 入门教程
程序员内功修炼
博客
问答
搜索
注册
登录
Info
Content
章节导航
Swoole 从入门到实战教程
目录索引
快速入门
4篇文章
Swoole 扩展安装与使用入门
基于 Swoole 实现高性能 HTTP 服务器
基于 Swoole 实现简单的 WebSocket 服务器及客户端
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
异步处理
3篇文章
基于 Swoole 定时器实现毫秒级任务调度
基于 Swoole 在 Laravel 中实现异步任务队列
基于 Swoole 在 Laravel 中实现异步事件监听及处理
并发编程之多进程篇
4篇文章
通过 Process 模块在 PHP 中实现多进程（一）：简单的多进程 TCP 服务器实现
基于 Process 模块在 PHP 中实现多进程（二）：进程间通信
基于 Process\Pool 通过进程池实现数据库和 Redis 的持久连接
通过 Swoole\Table 实现 Swoole 多进程数据共享
并发编程之协程篇
4篇文章
基于 Swoole 实现协程篇（一）：基本概念和底层原理
基于 Swoole 实现协程篇（二）：通过协程实现并发编程
基于 Swoole 实现协程篇（三）：在 Laravel 框架中使用协程
基于 SMProxy 通过协程调度实现 MySQL 连接池
底层原理篇
2篇文章
Swoole 的底层架构及运行原理
Swoole 驱动的 Laravel 应用优化原理及注意事项
实战篇
19篇文章
基于 Swoole 实现支持高并发的实时弹幕功能（上）
基于 Swoole 实现支持高并发的实时弹幕功能（下）
基于 Swoole 开发实时在线聊天室（一）：环境准备篇
基于 Swoole 开发实时在线聊天室（二）：后台数据库准备和 API 认证功能实现
基于 Swoole 开发实时在线聊天室（三）：后台 WebSocket 服务器实现
基于 Swoole 开发实时在线聊天室（四）：前端资源初始化
基于 Swoole 开发实时在线聊天室（五）：Homestead 开发环境初始化
基于 Swoole 开发实时在线聊天室（六）：建立 socket.io 客户端与 Swoole Websocket 服务器的连接
基于 Swoole 开发实时在线聊天室（七）：基于 Muse UI 3.0 的前端用户认证功能实现
基于 Swoole 开发实时在线聊天室（八）：Websocket 服务端重构与用户认证
基于 Swoole 开发实时在线聊天室（九）：实现客服机器人聊天功能
基于 Swoole 开发实时在线聊天室（十）：用户登录后获取未读消息数
基于 Swoole 开发实时在线聊天室（十一）：进入聊天室后获取历史聊天记录
基于 Swoole 开发实时在线聊天室（十二）：加入和退出聊天室房间功能实现
基于 Swoole 开发实时在线聊天室（十三）：发送文本/表情消息
基于 Swoole 开发实时在线聊天室（十四）：发送图片消息
基于 Swoole 开发实时在线聊天室（十五）：实现用户头像上传功能
基于 Swoole 开发实时在线聊天室（十六）：轮询保持长连接优化
基于 Swoole 开发实时在线聊天室（十七）：Websocket 通信用户认证逻辑优化
图书
Swoole 从入门到实战教程
快速入门
基于 Swoole 实现简单的 WebSocket 服务器及客户端
基于 Swoole 实现简单的 WebSocket 服务器及客户端
由 学院君 创建于3年前, 最后更新于 3年前
版本号 #2
24972 views
10 likes
0 collects
WebSocket 概述
这篇教程取自社群分享程序员内功修炼系列网络协议篇，其中对 WebSocket 协议的由来、实现原理和通信演示有详细介绍，这里我们摘取其中的简单实现篇来介绍，因为在那里也是基于 Swoole 实现 WebSocket 服务器的。
在此之前，有必要对 WebSocket 的原理做简单的说明，WebSocket 复用了 HTTP 协议来实现握手，然后通过请求报文中的 Upgrade 字段将 HTTP 协议升级到 WebSocket 协议来建立 WebSocket 通信连接，一旦 WebSocket 连接建立之后，就可以在这个长连接上通过 WebSocket 数据帧进行双向通信，客户端和服务端可以在任何时候向对方发送报文，而不是 HTTP 协议那种服务端只有在客户端发起请求后才能响应，从而解决了在 Web 页面实时显示最新资源的问题。
与 HTTP 类似，WebSocket 协议对应的 scheme 是 ws，如果是加密的 WebSocket 对应的 scheme 是 wss。
在这篇教程中，学院君将在服务端基于 Swoole 实现简单的 WebSocket 服务器，然后在客户端基于 JavaScript 实现 WebSocket 客户端。
WebSocket 服务器
PHP 异步网络通信引擎 Swoole 内置了对 WebSocket 的支持，通过几行 PHP 代码就可以写出一个异步非阻塞多进程的 WebSocket 服务器：
<?php
// 初始化 WebSocket 服务器，在本地监听 8000 端口
$server = new Swoole\WebSocket\Server("localhost", 8000);
// 建立连接时触发
$server->on('open', function (Swoole\WebSocket\Server $server, $request) {
echo "server: handshake success with fd{$request->fd}\n";
});
// 收到消息时触发推送
$server->on('message', function (Swoole\WebSocket\Server $server, $frame) {
echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
$server->push($frame->fd, "this is server");
});
// 关闭 WebSocket 连接时触发
$server->on('close', function ($ser, $fd) {
echo "client {$fd} closed\n";
});
// 启动 WebSocket 服务器
$server->start();
编写完成后，将这段 PHP 代码保存到本地 websocket_server.php 文件。
WebSocket 客户端
在客户端，可以通过 JavaScript 调用浏览器内置的 WebSocket API 实现 WebSocket 客户端，实现代码和服务端差不多，无论服务端还是客户端 WebSocket 都是通过事件驱动的，我们在一个 HTML 文档中引入相应的 JavaScript 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Chat Client</title>
</head>
<body>
<script>
window.onload = function () {
var nick = prompt("Enter your nickname");
var input = document.getElementById("input");
input.focus();
// 初始化客户端套接字并建立连接
var socket = new WebSocket("ws://localhost:8000");
// 连接建立时触发
socket.onopen = function (event) {
console.log("Connection open ...");
// 接收到服务端推送时执行
socket.onmessage = function (event) {
var msg = event.data;
var node = document.createTextNode(msg);
var div = document.createElement("div");
div.appendChild(node);
document.body.insertBefore(div, input);
input.scrollIntoView();
};
// 连接关闭时触发
socket.onclose = function (event) {
console.log("Connection closed ...");
input.onchange = function () {
var msg = nick + ": " + input.value;
// 将输入框变更信息通过 send 方法发送到服务器
socket.send(msg);
input.value = "";
};
</script>
<input id="input" style="width: 100%;">
</body>
</html>
将这个 HTML 文档命名为 websocket_client.html。
WebSocket 通信演示
接下来，我们在命令行启动 WebSocket 服务器：
php websocket.php
然后在浏览器中访问 websocket_client.html，首先会提示我们输入昵称：
输入之后点击确定，JavaScript 代码会继续往下执行，让输入框获取焦点，然后初始化 WebSocket 客户端并连接到服务器，这个时候通过开发者工具可以看到 Console 标签页已经输出了连接已建立日志：
在 Network 里面也可以看到 WebSocket 握手请求和响应：
这个时候我们在输入框中输入「你好，WebSocket！」并回车，即可触发客户端发送该数据到服务器，服务器接收到消息后会将其显示出来：
同时将「This is server」消息推送给客户端，客户端通过 onmessage 回调函数将获取到的数据显示出来。在开发者工具的 Network->WS 标签页可以查看 WebSocket 通信细节：
看起来，这个过程还是客户端触发服务器执行推送操作，但实际上，在建立连接并获取到这个客户端的唯一标识后，后续服务端资源有更新的情况下，仍然可以通过这个标识主动将更新推送给客户端，而不需要客户端发起拉取请求。WebSocket 服务器和客户端在实际项目中的实现可能会更加复杂，但是基本原理是一致的。
Laravel
教程
Swoole
WebSocket
服务器
客户端
高性能
点赞
取消点赞
收藏
取消收藏
赞赏
分享到以下平台：
<< 上一篇:
基于 Swoole 实现高性能 HTTP 服务器
>> 下一篇:
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
12 条评论
#11
peter zhao
评论于 1年前
回复 #8
正在删除评论...
解决了吗 大佬
#12
php-kevlin
评论于 4个月前
正在删除评论...
建立websocket客户端端口的时候查看端口映射对不对，目前的laradock端口是8001映射到8000端口，所以客户端修改为8001
‹
›
登录后即可添加评论
升级为学院君订阅用户(新年优惠🎁)
内容导航
WebSocket 概述
WebSocket 服务器
WebSocket 客户端
WebSocket 通信演示
相关推荐
基于 Swoole 实现高性能 HTTP 服务器
Swoole 从入门到实战教程
快速入门
在 Laravel 中集成 Swoole 实现 WebSocket 服务器
Swoole 从入门到实战教程
快速入门
通过 Process 模块在 PHP 中实现多进程（一）：简单的多进程 TCP 服务器实现
Swoole 从入门到实战教程
并发编程之多进程篇
基于 Swoole 开发实时在线聊天室（六）：建立 socket.io 客户端与 Swoole Websocket 服务器的连接
Swoole 从入门到实战教程
实战篇
目录索引
Swoole 从入门到实战教程
回到顶部
2022 基于 Laravel 6 构建
关于学院
订阅服务
友情链接
站点地图
本站 CDN 加速服务由又拍云赞助