示例代码

1. 前端websocket


<html>
<head><meta charset="UTF-8"><title>Web sockets test</title><script type="text/javascript">var ws;function ToggleConnectionClicked() {   if( typeof(ws) != 'undefined' && ws.readyState == 1 ) {alert('已连接服务器，请勿重复连接！');return false;}try {ws = new WebSocket("ws://192.168.198.221:9501");//连接服务器,改成你服务器地址ws.onopen = function(event){alert("已经与服务器建立了连接\r\n当前连接状态："+this.readyState);};ws.onmessage = function(event){// alert("接收到服务器发送的数据：\r\n"+event.data);var chat_content = document.getElementById("chat_content");chat_content.innerHTML = chat_content.innerHTML+event.data+"<br />";// console.log(event.data);};ws.onclose = function(event){alert("已经与服务器断开连接\r\n当前连接状态："+this.readyState);};ws.onerror = function(event){alert("WebSocket异常！");};} catch (ex) {alert(ex.message);      }};function SendData() {try{var content = document.getElementById("content").value;if(content){ws.send(content);}}catch(ex){alert(ex.message);}};function seestate(){if( typeof(ws) == 'undefined' ) {alert('还未连接服务器！');return false;}alert(ws.readyState);};function ClearChatContent(){document.getElementById("chat_content").innerHTML = "";};</script>
</head>
<body><button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接服务器</button><br /><br /><textarea id="content" ></textarea><button id='ToggleConnection' type="button" onclick='SendData();'>发送</button><br /><br /><button id='ToggleConnection' type="button" onclick='seestate();'>查看状态</button><br /><br /><button type="button" onclick='ClearChatContent();'>清屏</button><br /><br /><div id="chat_content"></div>
</body>
</html>

2. 后台php代码

<?php# 创建websocket服务器对象，监听0.0.0.0:9502端口$ws = new swoole_websocket_server("0.0.0.0", 9501);# 监听WebSocket连接打开事件$ws->on('open', function ($ws, $request) {// var_dump($request->fd, $request->get, $request->server);echo $request->server['remote_addr']."已连接\n";$ws->push($request->fd, "hello, welcome.your ip is {$request->server['remote_addr']}\n");# 广播foreach($ws->connections as $fd) {$ws->push($fd, "用户{$request->fd}已登录聊天");}});# 监听WebSocket消息事件$ws->on('message', function (swoole_websocket_server $server, $frame) {echo $frame->fd." Message: {$frame->data}\n";# 广播foreach($server->connections as $fd) {$server->push($fd, "用户{$frame->fd}说: {$frame->data}");}});# 监听WebSocket连接关闭事件$ws->on('close', function ($ws, $fd) {# var_dump($ws, $fd);echo "client-{$fd} is closed\n";});$ws->start();

3. 通过命令行进行启动php

./php /www/wwwroot/a/testa.php

4.测试

分别通过两个不同的浏览器打开前端H5页面（本人使用火狐浏览器和360浏览器），并连接服务器

火狐浏览器

360浏览器

发送信息

后台显示

小礼物走一走，来简书关注我

作者：00天火00
链接：https://www.jianshu.com/p/f00e45498149

websocket-php简易聊天（保持网页数据通讯）相关推荐

基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
基于 WebSocket 实现 WebGL 3D 拓扑图实时数据通讯同步（一）
今天没有延续上一篇讲的内容,穿插一段小插曲,WebSocket 实时数据通讯同步的问题,今天我们并不是很纯粹地讲 WebSocket 相关知识,我们通过 WebGL 3D 拓扑图来呈现一个有趣的 De ...
原创回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）
对昨天的简易聊天室进行优化增加一个mes对象,将传送的数据放在对象里增加一个mes对象,将传送的数据放在对象里 wsServer.js中替换代码 broadcast(conn.nickname + ...
Vue3 -- 基于Websocket实现简易聊天室
文章目录标题代码地址表情包资源 chat.data.ts index.vue 标题接上一篇博文这里使用 Vue3 + Typescript + Websocket 实现在线聊天功能的前端部分 ...
Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是"孔"或 ...
websocket实现简易聊天室
websocket支持全双工通信,也就是客户端和服务端双向通信.以前都是通过http轮询的方式实现实时的,这非常耗性能.Websocket不仅能节省资源和带宽,还能实现长链接的作用前端通过创建Web ...
SpringBoot整合WebSocket实现简易聊天室
文章目录什么是WebSocket ? WebSocket通信模型为什么需要WebSocket Websocket与http的关系 SpringBoot集成WebSocket 什么是WebSocke ...
nodejs websocket 实现简易聊天室功能
文章目录 1. 服务端 app.js 代码 2. 客户端 app.html 代码 3. 样式代码 app.css 4. nodemon 辅助开发首先说明,以下代码都是基于 Nodejs+webSoc ...
webSocket——Vue2简易聊天室
WebSocket原生实现 WebSocket-Vue2 WebSocket-Vue3 Vue2版本实现前端实现目录结构 login.vue 登录 <template><div& ...

websocket-php简易聊天（保持网页数据通讯）

示例代码

websocket-php简易聊天（保持网页数据通讯）相关推荐

最新文章

热门文章