技术笔记
0%

用swoole中的websockt 搭建一个简单的聊天

发表于 更新于 分类于 ，
  • 最近在学swoole 的websocket,来做一个小案例聊天软件

1.先来搭建一个服务端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<?php

//创建WebSocket Server对象，监听0.0.0.0:9502端口，这个ip得注意一下，很多新手不懂这个0.0.0.0，跟你直接绑定127.0.0.1，的区别，如果你直接写127.0.0.1的话，你用内网ip访问本机地址是访问不到的，0.0.0.0，是不限制ip，127.0.0.1，是限制只能用127.0.0.1来访问注意这一点
$ws = new Swoole\WebSocket\Server('0.0.0.0', 9502);

//监听WebSocket连接打开事件
$ws->on('open', function ($ws, $request) {

    //把自己的id返回回去
    $redata = [
        'fd'=>$request->fd
    ];

    $ws->push($request->fd,json_encode($redata));
});

//监听WebSocket消息事件
$ws->on('message', function ($ws, $frame) {
    //解析json
    $data = json_decode($frame->data,true);
    //拼接要发送的数据
    $redata = [
        'wfid'=>$frame->fd,
        'conent'=>$data['conent']
    ];
    //发送
    $ws->push($data['fid'],json_encode($redata));
});

//监听WebSocket连接关闭事件
$ws->on('close', function ($ws, $fd) {
    echo "{$fd} 关闭连接";
});

$ws->start();

1.在来写个html来测试一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>websoket聊天</title>
</head>
<body>
    <div id="messages">
    </div>
    <div>
        <div>对方fdid  <input id="fid" name='fid' type="text"></div>
        <div>发送内容  <input id="conent" name='conent' type="text"></div>
        <button id="send">发送</button>
    </div>
</body>
　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>


// 打开一个 web socket
var ws = new WebSocket("ws://192.168.80.131:9502");
ws.onopen = function()
{
    //刚链接发送
};

ws.onmessage = function (evt) 
{ 
    var received_msg = evt.data;
        console.log(received_msg);
        data = JSON.parse(received_msg);
        //是否第一次链接
        if(data.fd){
            conent = "你的fdid为："+data.fd;
        }else{
            conent = "<div>对方fid：" + data.wfid + "说：" + data.conent +"</div>";

        }

    $("#messages").append(conent);

};

ws.onclose = function()
{ 
    // 关闭 websocket
    alert("连接已关闭..."); 
};

$("#send").click(function(){
    //获取要发送的fd
    fid = $("#fid").val();
    //获取要发送的值
    conent = $("#conent").val();
    console.log(conent);
    //追加本地页面
    $("#messages").append("<div>我说：" +  conent +"</div>");
    var json ={"fid":fid, "conent":conent};
    //json转换字符串发送
    var jsonstr =JSON.stringify(json);
    //发送
    ws.send(jsonstr);
})

</script>
</html>


3.见证奇迹的时候到了

  • 启动 服务端 
    1
    2
    [root@localhost 02_chagn]# php websoket_server.php

  • 打开两个页面，当打开过后，出现两个fd
1
2
3
[root@localhost 02_chagn]# php websoket_server.php 
int(1)
int(2)
  • 页面1效果

页面1

  • 页面2效果

页面2