实时通信的「聊天室」源码,Ctrl+c/v就可以用!!!
“ workman 是高性能socket服务框架 、底部技术群交流”
首先,我在这里声明非常重要一点,观看这篇文章一定要知道,这个实现是一款 workerman+socket+php 制作的一款「简陋web聊天室」,没有任何样式、功能也是很单一(实时通信,群发,下线提醒)。写这个目的为学习workman、swoole的朋友一个简单参考方案。因此无脑键盘,切记~~~
workerman是一个高性能的PHP socket 服务器框架,workerman基于PHP多进程以及libevent事件轮询库,PHP开发者只要实现一两个接口,便可以开发出自己的网络应用,例如Rpc服务、聊天室服务器、手机游戏服务器等。
workerman的目标是让PHP开发者更容易的开发出基于socket的高性能的应用服务,而不用去了解PHP socket以及PHP多进程细节。workerman本身是一个PHP多进程服务器框架,具有PHP进程管理以及socket通信的模块,所以不依赖php-fpm、nginx或者apache等这些容器便可以独立运行
第1步
—
下载workerman
workerman下载地址:https://www.workerman.net/download
第2步
—
创建目录、以及复制代码
将workerman框架用编辑器打开,然后在它同级目录下创建一个php文件,比如index.php,然后将我下面的代码全部复制,粘贴到这个index.php中。
<?php
use Workerman\Worker;
require_once __DIR__ . '/Workerman-master/Autoloader.php';
// 创建一个websocket的Worker监听2000接口
$ws_worker = new Worker("websocket://0.0.0.0:2000");
// 只启动1个进程,这样方便客户端之间传输数据
$ws_worker->count = 1;
//模拟登陆,设用户id
$global_uid = 0;
// 当客户端连上来时分配uid,并保存连接,并通知所有客户端
$ws_worker->onConnect = function ($connection)
{
global $ws_worker, $global_uid;
// 为这个连接分配一个uid
$connection->uid = ++$global_uid;
};
// 当客户端发送消息过来时,转发给所有人
//这里data☞用户发送过来的数据
$ws_worker->onMessage =function($connection, $data)
{
global $ws_worker;
//循环用户id,并发送信息
foreach($ws_worker->connections as $conn)
{
//给用户发送信息
$conn->send("用户id[{$connection->uid}] 说: $data");
}
};
// 当客户端断开时,广播给所有客户端
$ws_worker->onClose=function($connection)
{
global $ws_worker;
//循环用户id,并发送信息
foreach($ws_worker->connections as $conn)
{
//给用户发送信息
$conn->send("用户id[{$connection->uid}] 断开链接");
}
};
// 运行worker
Worker::runAll();
第3步
—
启动socket服务
打开cmd到项目的根目录以cli的方式运行PHP文件(注:windows下需要配置php环境变量),启动服务即可。
第4步
—
复制前端代码
然后创建一个html页面,将我下面代码在复制到这个html页面中,这里html引入了boot cdn的vue,直接将域名指向创建的html页。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<ul>
<li v-for = "v in data">{{v}}</li>
</ul>
<aaa@qq.com代表表单提交后执行一个叫onsub的方法-->
<!--prevent代表阻止表单提交-->
<form @submit.prevent = "onSub">
<input type="text" v-model = "content">
<input type="submit" value="提交">
</form>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.common.dev.js"></script>
<script>
let ws = new WebSocket("ws://127.0.0.1:2000");
let app = new Vue({
el : "#app",
data : {
data:[],
content : '',
},
created : function(){//created创建vue实例后执行的第一个方法
//message接收php workman发送过来的数据
ws.onmessage = function (ev) {
//将值传入的data数组中
this.data.push(ev.data);
}.bind(this);
},
methods:{
onSub : function () {
//发送给php workman
ws.send(this.content);
}
}
})
</script>
</body>
</html>
第5步
—
开启浏览器浏览
然后同时以两个不同的浏览器打开html就可以看到输入的同步信息的效果了。对方关闭当前页面也会提示。(注:cmd窗口不要关闭)
————————end————————
WeChat微信群交流「WeChat:xzzs730」
喜欢的伙伴可以 长按 ↓ 下方图片 扫码加群
php web mysql Linux 其他
这里是一个实验场,希望给读者呈现一副关于中国互联网编程技术的「清明上河图」。
对互联网编程技术感兴趣「WeChat:xzzs730」审核通过,进入我们技术交流问题提问解答群。
【每日微信技术分享记录】
链接:微信技术分享记录
https://github.com/gtcarry888/WeChat-Sharing-record
链接:小程序相关源码
https://github.com/gtcarry888/Source-code
链接:互联网编程资源手册
https://github.com/gtcarry888/Idle-it-resources
原则:群内禁止鄙视、讽刺等任何初学者,否则直接踢群,禁止任何业余广告推广。
如有其他问题,可联系上述微信或者留言至aaa@qq.com邮箱。
喜欢的伙伴可以 长按 ↓ 下方图片 关注我的公众号
上一篇: 面试前的一波复习