十八、Swoole 基础学习笔记 - Swoole WebSocket 简版 Web 聊天室

作者: 温新

分类: 【Swoole 系列】

阅读: 1430

时间: 2023-03-13 11:30:09

hi，我是温新，一名PHPer

文章基于 Swoole 5.0.1 版本编写。

学习目标：转化 websocket 应用

说明：本篇文章结合官方文档编写及参考网络资料编写，虽非全部原创，但也是结合了自己的理解，若转载请附带本文 URL，编写不易，持续编写更不易，谢谢！

上一篇文章对 Swoole WebSocket 进行了一个简单的学习，本篇文章将结合上篇文章的学习进行一个小小的 web 聊天室案例的制作，进一步感受 websocket 的乐趣。

服务端代码

<?php
// 16-swoole-websocket-2.php

class WebSocketServer
{
	private $server = null;

	public function __construct()
	{
		$this->server = new Swoole\WebSocket\Server('0.0.0.0', 9501);
		$this->server->on('Open', [$this, 'onOpen']);
		$this->server->on('Message', [$this, 'onMessage']);
		$this->server->on('Close', [$this, 'onClose']);
	}

	public function onOpen($server, $request)
	{
		echo '客户端 ' . $request->fd . ' 连接成功' . PHP_EOL;
	}

	public function onMessage($server, $frame)
	{
		$server->push($frame->fd, '服务器返回数据：' . $frame->data);
	}

	public function onClose($server, $fd)
	{
		echo '客户端 ' . $fd . '已断开连接' . PHP_EOL;
	}

	public function start()
	{
		$this->server->start();
	}
}

$server = new WebSocketServer();
$server->start();

客户端代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>简版聊天室</title>
</head>
<body>
	<div>
		<textarea name="content" id="content" cols="30" rows="10"></textarea>
		<button onclick="send();">发送</button>
	</div>
	<div>
		<ul id="messageList"></ul>
	</div>


	<script>
		let ws = new WebSocket('ws://127.0.0.1:9501');

		ws.onopen = function () {
			ws.send('my name is WebSocket');
		}

		ws.onmessage = function (event) {
			let data     = event.data;
			let ul       = document.getElementById('messageList');
			let li       = document.createElement('li');
			li.innerHTML = data;
			ul.appendChild(li);
		}

		ws.onclose = function (event) {
			console.log('客户端关闭连接:' . event);
		}

		function send() {
			let obj     = document.getElementById('content');
			let content = obj.value;
			ws.send(content)
			obj.value   = '';
		}
	</script>
</body>
</html>

本篇文章使用的了面向对象版的 WebSocket，但这是花架子，本质没有发生变化。现在再来温习一下 Swoole Sebsocket。

创建 WebSocket 服务器，不要 open 和 message 这两个回调，其含义如下：

onOpen：客户端与服务端建立连接时触发该回调，该函数的第二个参数是 $request 对象，包含 http 握手的一些信息，如 get/cookie 等；
onMessage：服务端收到客户端的信息后调用。

再来看看整个交互流程：

1、客户端先给服务端发送数据：my name is WebSocket；
2、服务端收到消息后，在 onMessage 回调中向客户端发送数据；
3、客户端在 onmessage 回调内接收服务端的数据。

请登录后再评论