workerman+vue+php简单聊天

最新推荐文章于 2023-05-06 18:07:13 发布

尾巴藏起来

最新推荐文章于 2023-05-06 18:07:13 发布

阅读量786

点赞数

分类专栏： php

本文链接：https://blog.csdn.net/yqymzj/article/details/107979956

版权

php 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

php部分：

<?php
use Workerman\Worker;
//use Workerman\Autoloader;
require_once __DIR__ . '\Workerman\Autoloader.php';

// 创建一个Worker监听2345端口，使用http协议通讯

$worker = new Worker("websocket://0.0.0.0:2727");

// 启动4个进程对外提供服务
$worker->count = 1;

$uid = 0;

//当客户端连上来时
$worker->onConnect = function($connection){
  global $ws_worker,  $uid;
  //为这个链接分配一个uid
    $connection->uid = ++$uid;
};
//当客户端发送消息过来时，转发给所有人
$worker->onMessage = function($connection, $data)
{
    global $worker;
    foreach($worker->connections as $conn) {
        $conn->send("user_{$connection->uid} said: $data");
    }

};

//当客户端断开时，广播给所有客户端
$worker->onClose = function ($connection){
    global $worker;
    foreach($worker->connections as $conn) {
        $conn->send("user_{$connection->uid} logout");
    }
};

// 运行worker
Worker::runAll();

html部分：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>aaaaa</title>
</head>
<body>
<div id="app">
    <ul>
        <li v-for="message in messages">{{message}}</li>
    </ul>
    <form @submit.prevent="onSubmit">
        <input type="text" v-model="content">
        <input type="submit">
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>

        var ws = new WebSocket("ws://127.0.0.1:2727");

        var app = new Vue({
            el:"#app",
            data:{
                messages:[],
                content:''
            },
            created:function(){
                ws.onmessage = function(e){
                    this.messages.push(e.data);
                }.bind(this);
            },
            methods:{
                onSubmit:function(){
                    ws.send(this.content);
                }
            }
        })

</script>
</body>
</html>

尾巴藏起来

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
workerman+vue+php简单聊天

php部分：<?phpuse Workerman\Worker;//use Workerman\Autoloader;require_once __DIR__ . '\Workerman\Autoloader.php';// 创建一个Worker监听2345端口，使用http协议通讯$worker = new Worker("websocket://0.0.0.0:2727");// 启动4个进程对外提供服务$worker->count = 1;$uid = 0;
复制链接

扫一扫