使用php实现swoole单人入门在线聊天室

最新推荐文章于 2021-09-23 17:20:26 发布

Young' Su Ang

最新推荐文章于 2021-09-23 17:20:26 发布

阅读量540

点赞数 4

文章标签： swoole

我们坚信：人民有信仰民族有希望国家有力量，我在祖国怀里成长，祖国在我心中扎根

本文链接：https://blog.csdn.net/YoungSuAng/article/details/115637985

版权

声明：今天又进步了继承上次的代码该聊天室目前只有一对多，一对一的聊天功能，另外，因为没有使用到mysql，所以还存在比较多的缺陷地方，但知道原理就差不多了，这里主要分享下swoole简易的聊天室制作思路。

在这里插入图片描述

以下是前端代码，。。。非正吖八斤的前端，代码水平有限

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<div id="setName" style="display: block;margin-top: 325px;margin-left: 25px;">
		    <input  type="text" id="myname"/>
		    <input  type="submit" value="设置昵称" onclick="send_name()"/>
		</div>
		<div style="line-height: 20px;font-weight: bold;" id="textaa" >
				</div>
			<div style="position: absolute;bottom: 100px;margin-left: 14px;">
		        <input style="width: 300px;height: 50px; font-size: 25px;border-radius: 10px;padding-left: 10px; background-color: rgb(255,255,255,0.3);border:0;" type="text" id="text"/>
		        <input style="width: 110px;height: 50px;border: 0;background-color: #537cee;font-weight: bold;border-radius: 10px;display: inline-block;"  type="submit" value="发送数据" onclick="send_msg()" id="myTitle"/>
		    </div>
</body>
</html>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
	  var wsServer = "ws://150.158.164.198:9500";//调用websocket对象建立连接；//参数：ws/wss(加密)；//ip:port(字符串)
    const websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt){
        //console.log(evt)
        console.log('服务器连接成功')
        //onopen监听连续打开
        //应该显示远程服务器连接成功
        //msg.innerHTML = websocKet.readState;
   
    };
      // onmessage 监听服务器数据推送
    websocket.onmessage = function (evt) {
        console.log(evt);
        textaa.innerHTML += evt.data+"<br><br>";//不断递增数据
        console.log("从服务器获取到的数据："+evt.data);
    }
    //监听连接关闭
    websocket.onclose=function (evt) {
        console.log("服务器拒绝");
    }
      //发送信息
    function send_msg(){
        var text = document.getElementById("text").value;//获取数据
        console.log(text)
		if(text==''){
			alert('发送数据为空')
			return
		}
        document.getElementById("text").value='';//清空数据
        websocket.send(text);//向服务器发送数据
    }
    //发送昵称
    function send_name(){
        var text = document.getElementById('myname').value;//获取数据
        console.log(text);
		if(text==''){
			alert('昵称为空')
			return
		}
        websocket.send("#name#"+text);//向服务器发送数据
        /*var myTitle = document.getElementById('myTitle');
        console.log(myTitle);
        myTitle.innerHTML = "IM "+text;*/
        alert("设置成功");
    }



</script>

首先看前端js的代码：

<script>
	  var wsServer = "ws://150.158.164.198:9500";//调用websocket对象建立连接；//参数：ws/wss(加密)；//ip:port(字符串)
    const websocket = new WebSocket(wsServer);
    websocket.onopen = function (evt){
        //console.log(evt)
        console.log('服务器连接成功')
        //onopen监听连续打开
        //应该显示远程服务器连接成功
        //msg.innerHTML = websocKet.readState;
   
    };
      // onmessage 监听服务器数据推送
    websocket.onmessage = function (evt) {
        console.log(evt);
        textaa.innerHTML += evt.data+"<br><br>";//不断递增数据
        console.log("从服务器获取到的数据："+evt.data);
    }
    //监听连接关闭
    websocket.onclose=function (evt) {
        console.log("服务器拒绝");
    }
      //发送信息
    function send_msg(){
        var text = document.getElementById("text").value;//获取数据
        console.log(text)
		if(text==''){
			alert('发送数据为空')
			return
		}
        document.getElementById("text").value='';//清空数据
        websocket.send(text);//向服务器发送数据
    }
    //发送昵称
    function send_name(){
        var text = document.getElementById('myname').value;//获取数据
        console.log(text);
		if(text==''){
			alert('昵称为空')
			return
		}
        websocket.send("#name#"+text);//向服务器发送数据
        /*var myTitle = document.getElementById('myTitle');
        console.log(myTitle);
        myTitle.innerHTML = "IM "+text;*/
        alert("设置成功");
    }
	 function xxl(){
		document.getElementById("zaixian").style.display = "none";
		document.getElementById("lixian").style.display = "block";
		document.getElementById("title").style.color = "#eee";
	}


</script>

然后再看看完整的后端代码

<?php


//服务器代码
//创建 websocket 服务器代码
$ws = new swoole_websocket_server("0.0.0.0",9500);

// on 函数 open message close
$ws->on('open',function($ws,$request){
    //var_dump($request);
    //echo '===========================';
    //var_dump($GLOBALS);
    echo  "新用户 $request->fd 加入。\n";
   $GLOBALS['fd'][$request->fd]['id']=$request->fd;//设置用户ID
   $GLOBALS['fd'][$request->fd]['name']='匿名用户';//设置用户名
});
//message
$ws->on('Message',function($ws,$frame){
    //var_dump($ws);
    //var_dump($GLOBALS);
    //echo '-------------------------------';
    //var_dump($frame);
    $msg=$GLOBALS['fd'][$frame->fd]['name'].":".$frame->data."\n";
    if(strstr($frame->data,"#name#")){
        //用户昵称设置
        $GLOBALS['fd'][$frame->fd]['name']=str_replace("#name#",'',$frame->data);
    }else {
        //进行用户信息发送
        //发送每一个客户端
        foreach ($GLOBALS['fd'] as $i) {
            //var_dump($i);
            $ws->push($i['id'],$msg);
        }
    }
});
//close
$ws->on('close',function($ws,$request){
   echo "客户端-{$request} 断开连接\n"; 
});

$ws->start();
?>

因为基本主要的代码都放出来了，并且都有注释，所以就不过多的解释了。然后就再说一下这聊天时的整个运作流程：

|用户进入聊天室 -> 前端触发onopen -> 后端onopen -> 前端发信息send -> 后端接收信息onmessage -> 前端接收后端的返回信息onmessage -> 前后端监听关闭onclose

最后，因为这个是个人的练手学习笔记，所以希望大家不喜勿喷，如果有问题的可以给我留言哦！

Young' Su Ang

关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
5
评论
使用php实现swoole单人入门在线聊天室

声明：今天又进步了继承上次的代码该聊天室目前只有一对多，一对一的聊天功能，另外，因为没有使用到mysql，所以还存在比较多的缺陷地方，但知道原理就差不多了，这里主要分享下swoole简易的聊天室制作思路。以下是前端代码，。。。非正吖八斤的前端，代码水平有限<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewpo...
复制链接

扫一扫