服务端:

<?php
class Chat
{
const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问
const PART = 8080;//端口号 private $server = null;//单例存放websocket_server对象 public $roles = [
'郭靖','杨过','洪七公','尹志平','赵志敬','丘处机','欧阳锋','一灯大师','黄药师'
]; public function __construct()
{
//实例化swoole_websocket_server并存储在我们Chat类中的属性上,达到单例的设计
$this->server = new swoole_websocket_server(self::HOST, self::PART);
//监听连接事件
$this->server->on('open', [$this, 'onOpen']);
//监听接收消息事件
$this->server->on('message', [$this, 'onMessage']);
//监听关闭事件
$this->server->on('close', [$this, 'onClose']);
//设置允许访问静态文件
$this->server->set([
'document_root' => '/www/chat1',//这里传入静态文件的目录
'enable_static_handler' => true//允许访问静态文件
]); //开启服务
$this->server->start();
} /**
* 连接成功回调函数
* @param $server
* @param $request
*/
public function onOpen($server, $request)
{
echo $request->fd . '连接了' . PHP_EOL;//打印到我们终端
$server->push($request->fd,json_encode(['no' => $request->fd, 'msg' =>'']));
} /**
* 接收到信息的回调函数
* @param $server
* @param $frame
*/
public function onMessage($server, $frame)
{
$role = $this->getRole($frame->fd);
echo $role. '来了,说:' . $frame->data . PHP_EOL;//打印到我们终端
foreach ($server->connections as $fd) {//遍历TCP连接迭代器,拿到每个在线的客户端id
//将客户端发来的消息,推送给所有用户,也可以叫广播给所有在线客户端
$msg = $frame->data;
$server->push($fd, json_encode(['no' => $frame->fd,'role'=>$role, 'msg' => $msg]));
}
} public function getRole($fd)
{
$roles = count($this->roles);
$role = ($fd < $roles) ? $this->roles[$fd] : $this->roles[$fd%$roles];
var_dump($role);
return $role;
} /**
* 断开连接回调函数
* @param $server
* @param $fd
*/
public function onClose($server, $fd)
{
echo $fd . '走了' . PHP_EOL;//打印到我们终端
} } $obj = new Chat();

  客户端

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>聊天室</title>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>
<style>
.right {
color: blue;
display:block;
float:right;
width:100%;
} </style> <div style="width: 500px; margin:0 auto;">
<div class="log" id='scrolldIV' style="height:500px;border: 2px solid #ccc;line-height: 1.5em;overflow:auto" >

=======聊天室====== </div> <!--<input type="button" value="连接" onClick="link()">-->
<input type="hidden" value="" id="fd">
<!--<input type="button" value="断开" onClick="dis()">--> <div >
<input type="text" id="text"> <input type="button" value="发送" onClick="send()" id="submit">
</div> </div> <script> $(document).keydown(function(event){
if(event.keyCode==13){
$("#submit").click();
}
}); $(function () {
$("#text").focus();
link();
}) function link() { var url = 'ws://192.168.33.60:8080'; socket = new WebSocket(url); socket.onopen = function (evt) {
log1('<div>连接成功</div>')
} socket.onmessage = function (msg) {
var data = $.parseJSON(msg.data)
if(data.msg.length <= 0){
$("#fd").val(data.no);
} else {
log(data);
}
      
     
        var div = document.getElementById('scrolldIV');
        div.scrollTop = div.scrollHeight;
        }

        socket.onclose = function () {
log1('<div>断开连接</div>')
} } function dis() { socket.close(); socket = null; } function log1(data) {
$('.log').append(data);
}
function log(data) {
var nowFd = $("#fd").val();
console.log(data);
var role;
if(data['no'] == nowFd){
role ="我";
$('.log').append("<div class='right'>" + role+":"+ data['msg'] + '</div>');
} else { $('.log').append("<div >" + data.role+": "+data['msg'] + '</div>');
} } function send() {
var text = $('#text').val();
if(text.length > 0){
socket.send(text);
$("#text").val('');
} $("#text").focus(); } function send2() { var json = JSON.stringify({'type': 'php', 'msg': $('#text2').attr('value')}) socket.send(json); } </script> </body> </html>

  

服务端 启动

php Chat.php

访问客户端的html 浏览器打开

参考 https://www.jianshu.com/p/ac77f05bee56

swoole聊天室的更多相关文章

  1. lnmp环境 swoole聊天室

    pecl install swoole 安装php扩展swooleservice php-fpm restart 重启php服务whereis php.ini 查看php.ini的位置 查看文件是否配 ...

  2. swoole 聊天室

    1:宝塔终端安装php 2:宝塔终端检测是否安装好 php-v 3:宝塔面板安装swoole扩展,终端检测 php -m  查看扩展 扩展已经安装完毕

  3. swoole中websoket创建在线聊天室(php)

    swoole中websoket创建在线聊天室(php) swoole现仅支持Linix,macos 创建websocket服务器 首先现在服务器创建一个websocket服务器 <?php // ...

  4. 简单的聊天室代码php+swoole

    php swoole+websocket 客户端代码 <!DOCTYPE html> <html> <head> <title></title&g ...

  5. 用swoole和websocket开发简单聊天室

    首先,我想说下写代码的一些习惯,第一,任何可配置的参数或变量都要写到一个config文件中.第二,代码中一定要有日志记录和完善的报错并记录报错.言归正传,swoole应该是每个phper必须要了解的, ...

  6. Swoole实现h5版聊天室笔记

    声明:该聊天室目前只有一对多,一对一的聊天功能,另外,因为没有使用到mysql,所以还存在比较多的缺陷地方,但知道原理就差不多了,这里主要分享下swoole简易的聊天室制作思路. 开发环境:cento ...

  7. 用Swoole+React 实现的聊天室

    前后端分离的项目,使用 Swoole+React 实现的聊天室,整个项目的框架结构可以进行参考,前端 react+react-redux+react-router+react-ant 等等,后台使用 ...

  8. swoole实验版聊天室

    “swoole实验版聊天室”是依据一堂swoole培训课内容改编的,结合了bootstrap前端框架.redis数据库.jquery框架等实现基本功能,只是体现了swoole的应用,并不是为了专门写个 ...

  9. 如何利用swoole搭建一個簡易聊天室

    <?php class Chat { const HOST = '0.0.0.0';//ip地址 0.0.0.0代表接受所有ip的访问 const PART = 82;//端口号 private ...

随机推荐

  1. 爆库记录(X-Forwarded-For注入漏洞实战 记录)

    环境位置: https://www.mozhe.cn/bug/detail/QWxmdFFhVURDay90L0wxdmJXSkl5Zz09bW96aGUmozhe 参考: http://www.fr ...

  2. mysql正则替换某个字段值里面的某个字符串

    sql语句如下: UPDATE `ccvms_video` SET title=REPLACE(title, "最", "相对") WHERE title LI ...

  3. Zabbix之设置监控主机某个端口并发送邮件告警

    Zabbix可以配置监控主机的某个端口在该端口down之后触发发送告警邮件 一,添加监控项 选择主机 监控项 创建监控项 查看监控图形 二,设置触发器 设置触发器当该监控的端口down时可以发送告警 ...

  4. DSP VLIB实验

    声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 引言 在dsp开发中,为了节省开发时间和难度,TI将一些成熟的算法封装为模块,供开发者使用.如果能充分利用这些 ...

  5. VS2010开发.cpp与.c的注意事项

    VS2010开发.cpp与.c的注意事项 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 强大的VS2010,正是由于vs2010的完全封装,让现在的wind ...

  6. Time & Space Complexity

    Quick Sort: Time complexity: best case O(n*lgn), worst case O(n^2) Space complexity: Best case O(lgn ...

  7. javaIO -- 流的体系设计思路、基础分类

    一.流 1. 流的含义 在程序设计中,流是对于数据流动传输的一种抽象描述任何有能力产出数据的数据源,或者有能力接受数据的接收端对象都是一个流. 2. 流的源和目的 数据可能从本地文件读取,或者写入,  ...

  8. quartz 简单定时器

    <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring- ...

  9. Python split()方法分割字符串

    Python 中,除了可以使用一些内建函数获取字符串的相关信息外(例如 len() 函数获取字符串长度),字符串类型本身也拥有一些方法供我们使用. 注意,这里所说的方法,指的是字符串类型 str 本身 ...

  10. Excel常用操作1

    1.数据透视 所在选项卡:插入-数据透视表 例如:查看下表中各个工龄的平均工资 数据透视:选择所有数据--数据透视表--数据透视字段:选择工作经验和salary 切片器的使用,根据工作经验进行切片(还 ...