### 0、前言
在实际项目中，长连接我们会经常用到，有时候为了后台的信息即时性，我们也会使用到长连接进行消息推送等。
同时，在一些例如即时通讯工具、游戏开发、行程APP开发中。长连接都是基础的、必须掌握的技能点。

下面我们就来学习下，如何使用Swoole，搭建一个基本的WebSocket架构。

### 1、注意事项
（以下标记可以理解为一个class的实例，或一个请求实例。）
1、上下线状态管理，由于长连接是基于TCP握手协议构建的，所以当我们握手时需要标记对应实例的上线状态，当该标记挥手离开时，我们需要标记其下线状态，又或者直接杀掉该进程。

2、消息广播过滤，前面说到，标记会存在下线情况，当标记下线的时候，如果你还向该标记push消息，就会出现警告错误，所以需要利用上下线状态，避开这些可能已经挂掉的请求。

3、消息广播管理，由于WebSocket只有一个动作接收所有请求消息，所以不管是上线、下线、聊天消息等内容都是发送到这个动作中，所以我们需要合理的设计广播内容数据格式，至少都需要有一个code请求状态跟user_id身份标记。

### 2、服务端server.php代码
```
<?php
// +----------------------------------------------------------------------
// 小黄牛blog - Swoole 即时通讯交互处理
// +----------------------------------------------------------------------
// Copyright (c) 2018 https://xiuxian.junphp.com All rights reserved.
// +----------------------------------------------------------------------
// Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// Author: 小黄牛 <1731223728@qq.com>
// +----------------------------------------------------------------------

class Server{
	/**
	 * 客户端身份存储器
	*/
	private $_data = []; 
	/**
	 * WS的启动实例
	*/
	private $_ws;
	/**
	 * host-IP，0.0.0.0表示允许接收所有请求
	*/
	private $_host = '0.0.0.0';
	/**
	 * 端口号
	*/
	private $_port = '9502';

/**
     * 这是启动服务端的入口
    */
    public function run() { 
		$this->start_service(); 
		$this->start_handshake();
		$this->start_message();
		$this->end();
    }

/**
	 * ①启动websocker服务
	*/
	private function start_service() {
		# 创建websocket服务器对象，监听0.0.0.0:9502端口
		$this->_ws = new swoole_websocket_server($this->_host, $this->_port);
	}

/**
	 * ②监听WebSocket握手申请
	*/
	private function start_handshake() {
		# 监听WebSocket连接打开事件
		$this->_ws->on('open', function ($ws, $request){
			# 加入身份存储器
			$this->_data[$request->fd]['fd']      = $request->fd;
			# 默认离线状态
			$this->_data[$request->fd]['status']  = 0;
		});
	}

/**
	 * ③监听客户端消息发送请求
	*/
	private function start_message() {
		# 监听WebSocket消息事件
		$this->_ws->on('message', function ($ws, $frame) {
			$data = json_decode($frame->data, true);
			# 登录广播处理
			if ($data['code'] == 1) {
				# 修改fd对应的身份
				$this->_data[$frame->fd]['user_id'] = $data['user_id'];
				# 设置上线状态
				$this->_data[$frame->fd]['status']  = 1;
				# 发送广播上线消息
				$data['content'] = '【'.$data['user_id'].'】骑着小黄牛上线啦~！';
				$this->broadcast($ws, $this->json($data), $frame->fd);

# 其他请求
			} else {
				# 广播消息
				$this->broadcast($ws, $frame->data, $frame->fd);
			}
		});
	}

/**
	 * ④监听客户端退出事件
	*/
	private function end() {
		# 监听WebSocket连接关闭事件
		$this->_ws->on('close', function ($ws, $fd) {
			# 获取用户ID
			$user_id = $this->_data[$fd]['user_id'];
			# 设置离线状态
			$this->_data[$fd]['status']  = 0;
			$data = [
				'code' => 2,
				'user_id' => $user_id,
				'content' => '【'.$user_id.'】骑着小扫帚灰溜溜的走了~~！'
			];
			# 广播消息
			$this->broadcast($ws, $this->json($data));
		});

$this->_ws->start();
	}

/**
	 * 广播消息
	 * @todo 无
	 * @author 小黄牛
	 * @version v1.0.0.1 + 2018.11.12
	 * @deprecated 暂不弃用
	 * @global 无
	 * @param object $wx 实例
	 * @param string $content 广播内容
	 * @param string $id 自己的身份凭证 如果为空则也向自己广播
	 * @return void
	*/
	private function broadcast($ws, $content, $id=null) {
		# 向所有人广播
		foreach ($this->_data as $k=>$v) {
			# 不向自己广播，并且要在线的
			# 注意，这里一定要有上线状态的限制，否则假设用户已经退出，但你的进程还开着，实际上已经关闭，这时候push就会报错
			if ($k != $id && $v['status'] == 1) {
				$ws->push($v['fd'], $content);
			}
		}
	}

/**
	 * 数组转json
	 * @todo 无
	 * @author 小黄牛
	 * @version v1.0.0.1 + 2018.11.08
	 * @deprecated 暂不弃用
	 * @global 无
	 * @param array $array 数组
	 * @return json
	*/
	private function json($array) {
		return json_encode($array, JSON_UNESCAPED_UNICODE);
	}
}

$socketServer = new Server();
$socketServer->run();
```

### 3、前端WebSocket代码
```
<?php
// +----------------------------------------------------------------------
// 小黄牛blog - websocket
// +----------------------------------------------------------------------
// Copyright (c) 2018 https://xiuxian.junphp.com All rights reserved.
// +----------------------------------------------------------------------
// Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
// +----------------------------------------------------------------------
// Author: 小黄牛 <1731223728@qq.com>
// +----------------------------------------------------------------------
?>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Swoole+Websocket案例 - 小黄牛</title>
<script src="./js/jquery.min.js"></script>
<style>
html,body{margin:0;padding:0;font-size:13px}
.left{width: 20%;height: 600px;border: 1px solid #ddd;float: left;}
.right{width: 79.7%;height: 400px;border: 1px solid #ddd;border-left: 0px;float: left;overflow: auto;}
.bottom{width: 79.7%;height: 199px;border: 1px solid #ddd;border-left: 0px;border-top: 0px;float: left;}
#content{width: 99.5%;height: 165px;}
.blue{color:blue}
.red{color:red}
.div_left{width:100%;float:left}
.div_right{width:100%;float:left;text-align: right;}
.div_centent{width:100%;float:left;text-align: center;}
</style>
</head>

</ul>
</div>
<div class="right">

</div>
<div class="bottom">
	<textarea id="content"></textarea>
	<button type="button" id="submit">发送消息</button>
</div>

<h3>使用方法：</h3>
<p>①：CD进您的server.php文件目录</p>
<p>②：如果您是调试阶段，可以直接php server.php，激活程序，这样的话在运行过程中出错，能在cmd界面查看报错内容</p>
<p>③：如果您是部署阶段，可以使用nohup server.php >>/dev/null 2>&1 &命令，后台守护进程运行。</p>
</body>
</html>

// 打开连接成功
websocket.onopen = function (evt) {
	console.log("WebSocker - 链接成功.");
	var data = {
		'code':1, // 我们假设code为1时，是绑定登录请求
		'user_id':USER_ID
	};
	// 前端发送json前，必须先转义成字符串
	data = JSON.stringify(data);
	websocket.send(data);
};
// 接收服务端断开时的消息通知
websocket.onclose = function (evt) {
    alert("链接断开了");
};
// 接收到服务端的消息通知
websocket.onmessage = function (evt) {
	console.log('Retrieved data from server: ' + evt.data);
	var obj = JSON.parse(evt.data); 
	// 登录广播
	if (obj.code == 1) {
		// 存在修改上线状态
		if ($("#"+obj.user_id).length>0) {
			$("#"+obj.user_id+' span').removeClass('blue');
			$("#"+obj.user_id+' span').addClass('red');
			$("#"+obj.user_id+' span').html('离线');
		// 不存在，添加用户列表
		} else {
			$('.left ul').append('<li id="'+obj.user_id+'">'+obj.user_id+' <span class="blue">(在线)</span></li>');
		}
		$('.right').append('<div class="div_centent">'+obj.content+'</div>');
	// 下线广播
	} else if (obj.code == 2) {
		$("#"+obj.user_id+' span').removeClass('blue');
		$("#"+obj.user_id+' span').addClass('red');
		$("#"+obj.user_id+' span').html('离线');
		$('.right').append('<div class="div_centent">'+obj.content+'</div>');
	// 聊天消息广播
	} else if (obj.code == 3) {
		$('.right').append('<div class="div_left">'+obj.user_id+'：'+obj.content+'</div>');
		// 聊天界面默认自动底部
		$('.right').scrollTop( $('.right')[0].scrollHeight );
	}
};

// 接收Socket连接失败时的异常通知
websocket.onerror = function (evt, e) {
    console.log('Error occured: ' + evt.data);
};

// 点击发送消息按钮
$('#submit').click(function(){
	var content = $('#content').val();
	$('.right').append('<div class="div_right">'+content+'：'+USER_ID+'</div>');
	var data = {
		'code':3, // 我们假设code为3时，既为聊天消息广播请求
		'user_id':USER_ID,
		'content':content
	};
	// 前端发送json前，必须先转义成字符串
	data = JSON.stringify(data);
	websocket.send(data);
	// 输入表单清空
	$('#content').val('');
	// 聊天界面默认自动底部
	$('.right').scrollTop( $('.right')[0].scrollHeight );
});
</script>
```

### 4、使用方法
①：使用`CD`命令进您的`server.php`文件目录
②：如果您是调试阶段，可以直接`php server.php`命令激活程序，这样的话在运行过程中出错，能在cmd界面查看报错内容
③：如果您是部署阶段，可以使用`nohup php server.php >>/dev/null 2>&1 &`命令，后台守护进程运行。

完整的案例DEMO，可以直接到我的开源栏目中进行下载：[Swoole聊天室Demo之一](https://blog.junphp.com/open_source.jsp "Swoole聊天室Demo之一")

已有0条评论

添加新评论☺

如果认为本文对您有所帮助请赞助本站

支付宝扫一扫赞助

已有0条评论

添加新评论☺