websocket的demo

sy-records · sy-records · commit 37a8be4499ef · 2018-07-09T11:26:59.000+08:00
diff --git a/HttpServer.php b/HttpServer.php
@@ -0,0 +1,14 @@
+<?php
+/**
+ * @authors ShenYan (52o@qq52o.cn)
+ * @date    2018-07-09 09:39:53
+ * @boke    https://qq52o.me
+ */
+# 创建http服务
+$http = new swoole_http_server("0.0.0.0", 9501);
+# 监听服务器请求
+$http->on('request', function ($request, $response) {
+	$response->end("<h1>Hello Swoole. #" . rand(1000, 9999) . "</h1>");
+});
+# 启动服务
+$http->start();
diff --git a/WebSocket.php b/WebSocket.php
@@ -0,0 +1,34 @@
+<?php
+/**
+ * @authors ShenYan (52o@qq52o.cn)
+ * @date    2018-07-09 09:52:20
+ * @boke    https://qq52o.me
+ */
+# 定义clientFds数组 保存所有websocket连接
+$clientFds = [];
+
+# 创建websocket服务
+$server = new swoole_websocket_server("0.0.0.0", 9501);
+# 握手成功 触发回调函数
+$server->on('open', function (swoole_websocket_server $server, $request) use (&$clientFds) {
+	# echo "server: handshake success with fd{$request->fd}\n";
+	# 将所有客户端连接标识，握手成功后保存到数组中
+	$clientFds[] = $request->fd;
+});
+# 收到消息 触发回调函数
+$server->on('message', function (swoole_websocket_server $server, $frame) use (&$clientFds) {
+	# echo "receive from {$frame->fd}:{$frame->data},opcode:{$frame->opcode},fin:{$frame->finish}\n";
+	# $server->push($frame->fd, "this is server");
+	# 当有用户发送信息，发送广播通知所有用户
+	foreach ($clientFds as $fd) {
+		$server->push($fd, $frame->data);
+	}
+});
+# 关闭连接 触发回调函数
+$server->on('close', function ($ser, $fd) use (&$clientFds) {
+	# echo "client {$fd} closed\n";
+	# 关闭会话 销毁标识fd
+	unset($clientFds[$fd]);
+});
+# 启动websocket服务
+$server->start();
diff --git a/chat.html b/chat.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>WebSocket聊天室</title>
+</head>
+<body>
+	<div id="main" style="width:600px;height: 200px; overflow: auto;border: solid 2px black;">
+
+	</div>
+	<textarea id="textarea"></textarea>
+	<br/>
+	<input type="button" value="发送数据" onclick="send()">
+	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
+	 <script type="text/javascript">
+	 		var name =prompt("请输入您的昵称","匿名者"); //弹出input框
+	       // 打开一个 web socket
+			var ws = new WebSocket("ws://118.25.224.221:9501");
+
+			ws.onopen = function() {
+				console.log("连接成功");
+			};
+
+			//收到消息 触发回调
+			ws.onmessage = function (evt) { 
+				var data = evt.data;
+				console.log("收到socket服务消息，内容：" + data);
+				$('#main').append("<p>" + data + "</p>");
+			};
+	        
+			function send() {
+				var data = document.getElementById('textarea').value;
+				ws.send(name+ ":"+ data);
+			}
+
+	       ws.onclose = function() { 
+	          // 关闭 websocket
+	          console.log("连接已关闭..."); 
+	       };
+      </script>
+</body>
+</html>
