workman实现websocket

我是等闲之辈

已于 2023-02-09 15:28:49 修改

阅读量1.1k

点赞数

分类专栏： PHP websocket 文章标签： websocket php 前端

于 2023-02-09 14:19:26 首次发布

本文链接：https://blog.csdn.net/weixin_38155824/article/details/128952037

版权

PHP 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

websocket

3 篇文章 0 订阅

订阅专栏

workman实现websocket即时通讯很方便简单。根据官方文档的案例来实现：
https://www.workerman.net/doc/workerman/getting-started/simple-example.html

简单介绍一下实现步骤：

安装workman

在一个空目录中运行

composer require workerman/workerman

在项目根目录下创建ws_test.php

<?php
use Workerman\Worker;
use Workerman\Connection\TcpConnection;
require_once __DIR__ . '/vendor/autoload.php';

// 注意：这里与上个例子不同，使用的是websocket协议
$ws_worker = new Worker("websocket://0.0.0.0:2000");

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

// 当收到客户端发来的数据后返回hello $data给客户端
$ws_worker->onMessage = function(TcpConnection $connection, $data)
{
    //在控制台打印客户端发送过来的消息
    var_dump($data);
    var_export($data);

    // 向客户端发送hello $data
    $connection->send('hello ' . $data);
};

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

在项目根路径下创建chat.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input name="message"><button id="sendMessage">发送消息</button>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script>
    // 假设服务端ip为127.0.0.1
    ws = new WebSocket("ws://127.0.0.1:2000");
    ws.onopen = function() {
        console.log("连接成功")
    };

    //点击发送消息
    $("#sendMessage").click(function () {
        let mgs = $("input[name=message]").val();
        console.log(mgs)
        ws.send(mgs);
    })

    //监听服务端发送回来的消息
    ws.onmessage = function(e) {
        alert("收到服务端的消息：" + e.data);
    };
</script>
</html>

最终的项目结构如下：
在这里插入图片描述

先开启服务端：

php ws_test.php start

再打开chat.html页面，输入消息回车后开前端和后端的控制台

在这里插入图片描述

检查前端是否真的连接的是websocket

在这里插入图片描述

前端加入心跳检测

    // 假设服务端ip为127.0.0.1
    ws = new WebSocket("ws://127.0.0.1:2000");
    let heart_check_timer = null
    ws.onopen = function() {
        console.log("连接成功")
        //每隔一段时间进行心跳检测
         heart_check_timer = setInterval(heart_check_fun,3000);
    };

    //点击发送消息
    $("#sendMessage").click(function () {
        let mgs = $("input[name=message]").val();
        console.log(mgs)
        ws.send(mgs);
    });

    //监听服务端发送回来的消息
    ws.onmessage = function(e) {
        console.log("收到服务端的消息：" + e.data);
    };

    //定时发送心跳包
    heart_check_fun = function () {
        let data = {
            type:'heartCheck',
            msg:'ping'
        };
        ws.send(JSON.stringify(data));
    };
    
    //连接关闭函数
    ws.onclose = function () {
        console.log("连接已关闭...");
        // webSocketReconnect(wsUrl)//如果连接关闭则重连
        //关闭websocket的时候停止setInterval()
        clearInterval(heart_check_timer);
    };

    //连接错误函数
     ws.onerror = function () {
        console.log("连接错误...");
      };