Solid

swoole+websocket+redis实现一对一聊天

若如初见. 提交于 2020-07-28 10:48:42
如同web端的QQ和微信一样,这是一个web端的聊天程序。 环境:linux(centos) + php7.2 + swoole扩展 + redis + mysql Redis 实现每个连接websocket的服务都唯一绑定一个用户。通过 用户账号 = websocket fd 存到redis中。 Mysql 实现离线消息池。如果一个用户不在线,则其他用户发送给他的消息暂时存储在mysql。待该用户上线时,再从离线消息池取出发送。 此处是看了 还是感谢大神。 具体参考代码和相应注释: 服务端代码: <? php $server = new swoole_websocket_server("0.0.0.0", 9052 ); $redis = new Redis(); $redis ->connect('127.0.0.1', 6379 ); $db = new mysqli('127.0.0.1', 'test', 'test', 'thinkphp5' ); $server ->on('open', function (swoole_websocket_server $server , $request ) { echo "server: handshake success with fd{ $request ->fd}\n"; // $request->fd 是客户端id })

html/css静态网页制作

故事扮演 提交于 2020-07-28 09:04:28
任务要求: 简单对网页进行分割布局,基本思路上中下三部分,然后在每一部分细分 <! doctype html > < html > < head > < meta charset ="utf-8" > < title > 无标题文档 </ title > < link href ="qiyecss/qiye.css" type ="text/css" rel ="stylesheet" > </ head > < body > < div id ="body" > < div id ="top" > < div class ="logo" ></ div > < div class ="search" > 搜索产品 < input class ="text" type ="text" name ="" value ="" > < input class ="button" type ="button" name ="" value ="" > </ div > </ div > < div id ="back_top" > < div class ="back_a" ></ div > < div class ="back_b" ></ div > < div class ="back_one" > < ul > < li >< a href ="#" > 首页 </ a ></

试着用workerman开发一个在线聊天应用

南笙酒味 提交于 2020-07-28 08:08:33
聊天功能是很常见的一种功能,Workerman是一款开源高性能异步PHP socket即时通讯框架。 什么是Workerman? Workerman是一款 开源 高性能异步 PHP socket即时通讯框架 。支持高并发,超高稳定性,被广泛的用于手机app、移动通讯,微信小程序,手游服务端、网络游戏、PHP聊天室、硬件通讯、智能家居、车联网、物联网等领域的开发。支持TCP长连接,支持Websocket、HTTP等协议,支持自定义协议。拥有异步Mysql、异步Redis、异步Http、MQTT物联网客户端、异步消息队列等众多高性能组件。 以下我们来搭建与配置一下Workerman 第一步:先把workerman里需要用到的扩展composer下来。 "workerman/gateway-worker": "^3.0", "workerman/gatewayclient": "^3.0", "workerman/workerman": "^3.5", 第二步:到官方网站把demo全部下载下来,然后放到我们项目中的目录,我这里用的是laravel框架 图片中我就把整个项目都放在了HTTP/Controller/Workerman中。 第三步:我们需要把把以下3个文件的引用部分修改为以下。不然会报路径错误 require_once __DIR__ . '/../../../../..

一篇文章教会你如何制做精美导航条

瘦欲@ 提交于 2020-07-28 06:27:02
【一、项目背景】 让更多的人去学习html,以广东科技学院的导航栏为例, 教大家怎么去做一个横向的导航栏。 【二、项目准备】 准备一个编程的软件Dreamweaver,打开软件点击文件新建一个叫导航栏的项目,如下图所示。 点击确定之后,会弹出下图。 【三、项目实施】 1. 在<body>标签里面写下一个框架: 注:<nav>标签定义导航链接的部分。<ul> 标签定义无序列表,<li>标签定义列表项目。 <li> 标签可用在有序列表 (<ol>) 和无序列表 (<ul>) 中。 2. 写完运行(运行:右下角点击f12运行)看到效果,如下图所示: 3. 加入css样式表(这里采用内部样式表)。 3.1 CSS样式表有两种加入的方式 如图: 3.2 去除li带来的小黑点: li{ list-style: none; } 4. 基于上述步骤,运行一下 如下图所示: 5. 设置一下导航栏的样式。 设置一下列表ul 的宽度 ,高度,背景颜色,文字位置居中(margin:0 auto)。 Li 同样的设置高度 。 去掉小黑点 ,再设置文字的颜色 ,高度 ,内边距 ,(个人喜好 看着舒服就行) 设置文字的大小,去掉下划线(text-decoration:none;)。 下面是详细备注 ul li{float: left; # 把内容左浮动,这样可以横向排列 width: 100px; #

超能陆战队之大白的制作过程

孤街浪徒 提交于 2020-07-27 13:45:54
效果图如下:            友情提示:本篇文章只是用来熟练掌握css样式和布局能力,空闲时间不妨敲一遍,增加一些体验,我也不算白敲一遍。。 是不是有点心动呢?接下来请看具体步骤:   首先先把HTML部分先写完,做出整体的结构: < div class ="baymax" > <!-- 定义头部 眼睛、嘴巴 --> < div class ="head" > < div class ="eye" ></ div > < div class ="eye2" ></ div > < div class ="mouth" ></ div > </ div > <!-- 定义躯干 --> < div class ="torso" > < div class ="heart" ></ div > </ div > <!-- 定义肚子腹部 --> < div class ="belly" > < div class ="cover" ></ div > </ div > <!-- 定义左臂 包括一大一小两个手指 --> < div class ="left_arm" > < div class ="l_bigFinger" ></ div > < div class ="l_smallFinger" ></ div > </ div > <!-- 定义右臂 包括一大一小两个手指 -->

第一次入博客如何简单的设置博客园皮肤

有些话、适合烂在心里 提交于 2020-07-27 09:02:08
(1) 进到设置里面 (2) 把下面代码复制到 <定制CSS代码> 1 /* simplememory */ 2 #google_ad_c1, #google_ad_c2 { display : none ;} 3 .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { 4 font-size : 14px!important ; 5 } 6 #home { 7 opacity : 0.80 ; 8 margin : 0 auto ; 9 width : 85% ; 10 min-width : 950px ; 11 background-color : #fff ; 12 padding : 30px ; 13 margin-top : 30px ; 14 margin

html+css面试合集

南楼画角 提交于 2020-07-27 04:19:48
1 介绍一下标准的 CSS 的盒子模型?与低版本 IE 的盒子模 型有什么不同的?   标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin   低版本 IE 盒子模型:宽度=内容宽度 (content+border+padding)+ margin 2 box-sizing 属性?   用来控制元素的盒子模型的解析模式,默认为 content-box context-box:   W3C 的标准盒子模型,设置元素的 height/width 属性指的是 content 部分的高/宽 border-box:   IE 传统盒子模型。设置元素的 height/width 属性指的是 border + padding + content 部分的高/宽 3 CSS 选择器有哪些?哪些属性可以继承?   CSS 选择符:id 选择器(#myid)、类选择器(.myclassname)、 标签选择器(div, h1, p)、相邻选择器(h1 + p)、子选择器 (ul > li)、后代选择器(li a)、通配符选择器(*)、属 性选择器(a[rel="external"])、伪类选择器(a:hover, li:nth-child)   可继承的属性:font-size, font-family, color   不可继承的样式:border,

#转贴分享# 面向对象编程的十大原则

♀尐吖头ヾ 提交于 2020-07-27 03:48:44
众所周知,面向对象的设计原则(Object-Oriented Design Principles)是面向对象编程(OOP)的核心。但是,如今有许多Java程序员在追求诸如 Singleton 、 Decorator 或 Observer 等设计模式的同时,却忽略了面向对象的分析和设计。我们除了要学习诸如抽象、封装、多态和继承之类的基础知识,还需要了解面向对象的设计原则。据此,我们可以创建出简洁的模块化设计,以便后期轻松地开展测试,调试和维护。 不知您是否听说过OOP的SOLID设计原则(请参见-- https://javarevisited.blogspot.com/2018/02/top-5-java-design-pattern-courses-for-developers.html )?作为一种面向对象设计原则,它具体包括如下十个部分。 1.DRY(Don’t repeat yourself) 顾名思义,DRY表示不要编写重复的代码,应尽量使用抽象类(Abstraction)来抽象出目标事物。例如:如果您有两个以上的代码块,那么就应当考虑使其成为一个单独的方法。如果您多次用到某个硬编程(hard-coded)的值,那么就应当将它们设为public final constant(请参见-- http://javarevisited.blogspot.com/2011/12

布局之: flex(CSS3新增)

▼魔方 西西 提交于 2020-07-26 23:41:10
flex 基本概念   flex布局(flex是flexible box的缩写), 也称为弹性盒模型 。 将属性和属性值(display:flex; )写在哪个标签样式中,谁就是 容器;它的所有子元素自动成为容器成员,称为项目。 当一个元素的display 取值为flex,所有项目(子元素)会在一行显示;如果所有项目的尺寸之和大于容器,也不会超出父元素的宽、高度。不会换行(每个项目都会自动缩小相应的比例)。 <! DOCTYPE html > < html lang ="en" > < head > < meta charset ="UTF-8" > < meta name ="viewport" content ="width=device-width, initial-scale=1.0" > < title > 布局之:flex </ title > < link rel ="stylesheet" href ="./CSS/normalize.css" > < style > section { width : 500px ; height : 800px ; border : 2px solid black ; margin : 50px auto ; display : flex ; } div { width : 100px ; height : 100px ;

Vue 阻止事件冒泡

醉酒当歌 提交于 2020-07-26 15:50:55
Vue 阻止事件冒泡 by: 授客 QQ : 1033553122 开发环境 Win 10 element-ui "2.8.2" Vue 2.9.6 事件冒泡简介 如下图,当我们点击页面某个元素时,会产生点击事件,事件由外到内,逐层递进(事件捕获阶段,途中的1->2->3->4),当目标元素捕捉到目标事件时,会响应事件,并由内到外,逐层往外传递(事件冒泡阶段,图中的4->5->6->7),这便是事件冒泡。正式因为冒泡机制,当用户点击图中目标元素div时,5,6,7事件区的元素都会响应点击事件(如果具备响应事件能力的话) 实验1 <template> <div> <div id="app" @click="fun1" style="padding:5px;border:2px solid #b7b766"> div1 <div @click="fun2" style="padding:5px;border:2px solid #79CDCD;"> div2 <div @click="fun3" style="padding:5px; border:2px solid #BEBEBE;"> div3 <div @click="fun4" style="border:2px solid #8470FF;">div4</div> </div> </div> </div> </div> <