美文网首页
websocket-php简易聊天(保持网页数据通讯)

websocket-php简易聊天(保持网页数据通讯)

作者: 00天火00 | 来源:发表于2017-04-24 16:36 被阅读0次

我的博客:https://blog.thuol.com

说明

需要安装 swoole扩展



在linux系统下通过命令行执行php文件。(win下没有swoole扩展)

示例代码

1. 前端websocket


<html>
<head>
    <meta charset="UTF-8">
    <title>Web sockets test</title>
    <script type="text/javascript">
        var ws;
        function ToggleConnectionClicked() {   
            if( typeof(ws) != 'undefined' && ws.readyState == 1 ) {
                alert('已连接服务器,请勿重复连接!');
                return false;
            }

            try {
                ws = new WebSocket("ws://192.168.198.221:9501");//连接服务器,改成你服务器地址
                ws.onopen = function(event){
                    alert("已经与服务器建立了连接\r\n当前连接状态:"+this.readyState);
                };
                ws.onmessage = function(event){
                    // alert("接收到服务器发送的数据:\r\n"+event.data);
                    var chat_content = document.getElementById("chat_content");
                    chat_content.innerHTML = chat_content.innerHTML+event.data+"<br />";
                    // console.log(event.data);
                };
                ws.onclose = function(event){
                    alert("已经与服务器断开连接\r\n当前连接状态:"+this.readyState);
                };
                ws.onerror = function(event){
                    alert("WebSocket异常!");
                };
            } catch (ex) {
                alert(ex.message);      
            }
        };
 
        function SendData() {
            try{
                var content = document.getElementById("content").value;
                if(content){
                    ws.send(content);
                }
                
            }catch(ex){
                alert(ex.message);
            }
        };
 
        function seestate(){
            if( typeof(ws) == 'undefined' ) {
                alert('还未连接服务器!');
                return false;
            }
            alert(ws.readyState);
        };

        function ClearChatContent(){
            document.getElementById("chat_content").innerHTML = "";
        };
    </script>
</head>
<body>
    <button id='ToggleConnection' type="button" onclick='ToggleConnectionClicked();'>连接服务器</button><br /><br />
    <textarea id="content" ></textarea>
    <button id='ToggleConnection' type="button" onclick='SendData();'>发送</button><br /><br />
    <button id='ToggleConnection' type="button" onclick='seestate();'>查看状态</button><br /><br />
    <button type="button" onclick='ClearChatContent();'>清屏</button><br /><br />
    <div id="chat_content"></div>
</body>
</html>

2. 后台php代码

<?php
    # 创建websocket服务器对象,监听0.0.0.0:9502端口
    $ws = new swoole_websocket_server("0.0.0.0", 9501);
 
    # 监听WebSocket连接打开事件
    $ws->on('open', function ($ws, $request) {
        // var_dump($request->fd, $request->get, $request->server);
        echo $request->server['remote_addr']."已连接\n";
        $ws->push($request->fd, "hello, welcome.your ip is {$request->server['remote_addr']}\n");
 
        # 广播
        foreach($ws->connections as $fd) {
            $ws->push($fd, "用户{$request->fd}已登录聊天");
        }
    });
 
    # 监听WebSocket消息事件
    $ws->on('message', function (swoole_websocket_server $server, $frame) {
        echo $frame->fd." Message: {$frame->data}\n";
        # 广播
        foreach($server->connections as $fd) {
            $server->push($fd, "用户{$frame->fd}说: {$frame->data}");
        }
 
    });
 
    # 监听WebSocket连接关闭事件
    $ws->on('close', function ($ws, $fd) {
        # var_dump($ws, $fd);
        echo "client-{$fd} is closed\n";
    });
 
    $ws->start();

3. 通过命令行进行启动php

./php /www/wwwroot/a/testa.php

4.测试

分别通过两个不同的浏览器打开前端H5页面(本人使用火狐浏览器和360浏览器),并连接服务器

火狐浏览器


360浏览器


发送信息


后台显示


相关文章

  • websocket-php简易聊天(保持网页数据通讯)

    我的博客:https://blog.thuol.com 说明 需要安装 swoole扩展 在linux系统下通过命...

  • 手写服务器-3~测试网页

    用于测试服务器程序的简易网页

  • 简易网页钢琴(二)

    前置文章《 简易网页钢琴(一)》 移步 https://www.jianshu.com/p/7b472b2a9a9...

  • 简易网页钢琴(三)

    网站预览或源码下载方式一:http://kevin5979.3vfree.net/share/javaScript...

  • 简易网页钢琴(一)

    本人小白,练手代码,如有不足,请见谅,也欢迎评论交流 先看效果图 网站预览或源码下载方式一:http://kevi...

  • 网页聊天插件

    进入网页聊天插件设置界面 弹出颜色选择框,在此区域内选择颜色即可,点击select保存点击cancel取消操作,您...

  • 网页聊天链接

    登陆ppmessage后点击设置,下拉滚动条找到开发者设置框中网页聊天链接即图中所示 通过这个链接可以您的客服团队...

  • ESP8266 网页与Arduino数据通讯

    esp8266可以把自己变成一个服务器,上面运行一个网页,这个比普通的单片机有一个天然的优势就是配置方面可以非常复...

  • 【转】各种常见的标准尺寸

    网页设计标准尺寸: 1、800*600下,网页宽度保持在778以内, 2、1024*768下,网页宽度保持在100...

  • 简易聊天室

    前言 本来我做的这个简易聊天室程序是想上课堂展示的,但是这个idea和我的好朋友本门课程的大作业有一些相似,所以为...

网友评论

      本文标题:websocket-php简易聊天(保持网页数据通讯)

      本文链接:https://www.haomeiwen.com/subject/ofrpzttx.html