实时通信的「聊天室」源码,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

image.gif

第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();

image.gif

第3步

启动socket服务

打开cmd到项目的根目录以cli的方式运行PHP文件(注:windows下需要配置php环境变量),启动服务即可。

网络异常,图片无法展示
|
image.gif 编辑

第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>
    <!--@submit代表表单提交后执行一个叫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>

image.gif

第5步

开启浏览器浏览

然后同时以两个不同的浏览器打开html就可以看到输入的同步信息的效果了。对方关闭当前页面也会提示。(注:cmd窗口不要关闭)

image.gif编辑

image.gif编辑

————————end————————

WeChat微信群交流「WeChat:xzzs730」

相关文章
|
网络协议 计算机视觉
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
项目实战:Qt多人聊天室程序(在线、离线、离线信息再次登录后发送等)
|
7月前
|
存储 网络协议 Ubuntu
【Linux开发实战指南】基于UDP协议的即时聊天室:快速构建登陆、聊天与退出功能
UDP 是一种无连接的、不可靠的传输层协议,位于IP协议之上。它提供了最基本的数据传输服务,不保证数据包的顺序、可靠到达或无重复。与TCP(传输控制协议)相比,UDP具有较低的传输延迟,因为省去了建立连接和确认接收等过程,适用于对实时性要求较高、但能容忍一定数据丢失的场景,如在线视频、语音通话、DNS查询等。 链表 链表是一种动态数据结构,用于存储一系列元素(节点),每个节点包含数据字段和指向下一个节点的引用(指针)。链表分为单向链表、双向链表和循环链表等类型。与数组相比,链表在插入和删除操作上更为高效,因为它不需要移动元素,只需修改节点间的指针即可。但访问链表中的元素不如数组直接,通常需要从
338 2
|
3月前
|
存储 缓存 前端开发
Web端IM聊天消息该不该用浏览器本地存储?一文即懂!
鉴于目前浏览器技术的进步(主要是HTML5的普及),在Web网页端IM聊天应用的技术选型阶段,很多开发者都会纠结到底该不该像原生移动端IM那样将聊天记录缓存在浏览器的本地,还是像传统Web端即时通讯那样继续存储在服务端?本文将为你简洁明了地讲清楚浏览器本地存储技术(Web Storage),然后你就知道到底该怎么选择了。
57 1
|
9月前
|
监控 JavaScript API
局域网监控软件的实时通知系统:利用Node.js和WebSocket实现即时消息推送
本文介绍了如何使用Node.js和WebSocket构建局域网监控软件的实时通知系统。实时通知对于网络安全和家庭监控至关重要,能即时发送监控数据变化的通知,提高响应速度。通过Node.js创建WebSocket服务器,当数据变化时,监控软件发送消息至服务器,服务器随即推送给客户端。此外,还展示了如何利用Node.js编写API,自动将监控数据提交到网站,便于用户查看历史记录,从而提升监控体验。
218 3
|
7月前
基于QT实现的QQ聊天简易版(UDP通信版)
源码已经给小伙伴们整理好了,微信搜索 嵌入式工程之家 关注公众号回复 QQ 即可获得源码和详细操作指示哦~
141 0
|
9月前
UDP通信程序练习(实现模拟聊天室)
UDP通信程序练习(实现模拟聊天室)
106 0
|
小程序 容器
网络游戏开发-客户端3(封装按钮按下效果和一个模态对话框)
网络游戏开发-客户端3(封装按钮按下效果和一个模态对话框)
102 0
|
存储 Web App开发 JavaScript
面试官:你是如何实现浏览器多标签页之间通信的?
前言 我们都知道浏览器是可以打开很多标签页的,如果每个标签页代表的是单独的一个网站,那么这些标签页之间肯定是不能通信的,如果能通信那估计我们都得凉凉。但是在很多情况下,浏览器中的很多标签页都属于某一个网站,而且这些标签页之间会使用一些相同的数据,这个时候我们就需要让这些标签页的数据都保持同步。 比如很多博客网站,点击文章列表通常是打开一个新的标签页进入文章详情页,那么如果我们在文章详情页点赞、评论等操作,而文章列表页也使用了这些数据,这个时候我们需要保持两边的数据一致,衍生出来就是详情页改了数据,需要让列表页知道。 总结来看:在某些情况下,实现多标签页之间通信是必要的!
667 0
面试官:你是如何实现浏览器多标签页之间通信的?
|
开发工具 C++
C++音乐播放按钮的封装过程详解
1、准备工作:音乐、开发工具VS stdio及图形库工具 2、设计思路:先加载音乐,再通过点击不同的按钮执行不同的操作(播放音乐,暂停音乐、继续播放、结束播放) 绘制按钮我们通过一个按钮button类来操作,这样数据会存在一些必要的访问数据权限,并可以将多个函数声明写在同一个类中,调用只需使用 " 类名.函数名 “即可调用里面的函数
|
缓存 前端开发 JavaScript
从零开始实现放置游戏(十三)——实现战斗挂机(4)添加websocket组件
前两张,我们已经实现了登陆界面和游戏的主界面。不过游戏主界面的数据都是在前端写死的文本,本章我们给game模块添加websocket组件,实现前后端通信,这样,前端的数据就可以从后端动态获取到了。
从零开始实现放置游戏(十三)——实现战斗挂机(4)添加websocket组件