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