首页 > php框架 > Swoole > 利用 webSocket 与 Swoole 打造一个小型聊天室(协程)

利用 webSocket 与 Swoole 打造一个小型聊天室(协程)

谨言慎行
发布: 2022-02-22 09:32:05
原创
2691 人浏览过

前言

    前面有写一个异步简单的聊天室,然后想着,就把协程的也弄了吧所以就有了这个文章,其实所有的功能都大差不差,就仅仅几个地方不一样而已,也都是简单的地方。
博文地址:利用 webSocket 与 Swoole 打造一个小型聊天室 (异步)
本次也没增加功能,就是增加了一个心跳,从前端定时发送一个 ping ,服务端不作反应,仅此而已。

前端页面代码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!DOCTYPE html>

<html lang="en">

<head>   

<meta charset="UTF-8">   

<title>打工人聊天室</title>  

<!--需要引入jq 文件--></head><style>   

.content {       

height: 400px;       

max-width: 400px;       

overflow: auto;       

border-radius: 5px;       

border: 1px solid #f0f0f0;   

}</style>

<body>           

<div id="content" class="content">               

<p>聊天区域</p>           

</div>           

你好打工人:<samp id="nickname">昵称</samp> <br>           

本次连接FD: <samp id="fd-samp"></samp> <br>           

<input type="text" id="msg">           

<input type="hidden" id="fd" value="">           

<button id="send" onclick="send()">发送</button>

</body>

</html>

登录后复制

JS 代码:

在服务器信息回执时,会有第一次连接回执,还是服务端发送消息回执的状态区别,通过 msgType 来分辨,如果是第一次连接的回执消息,则把 FD 做一个页面留存,并不显示在聊天消息区,如果收到的是消息回执,就直接显示到聊天消息区。

还有就是,前后端相互通信发送的东西,都是字符串性质最优,我前端处理的方法是先组合成一个对象,然后转 JSON 串。

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

<script>   

//滚动条最底部   

function scrolltest() {       

var div = document.getElementById("content");       

div.scrollTop = div.scrollHeight;    }   

var wsServer = &#39;ws://127.0.0.1:9502/websocket&#39;;   

var websocket = new WebSocket(wsServer);   

var nickname = Math.random().toString(36).substr(2);   

thisFd = &#39;&#39;;    $(&#39;#nickname&#39;).html(nickname);   

//点击发送   

function send() {       

var msg = $(&#39;#msg&#39;).val();       

var data = {           

&#39;nickname&#39;: nickname,           

&#39;fd&#39;: thisFd,           

&#39;data&#39;: msg        }       

//生成json 方便后台接收以及使用       

var data = JSON.stringify(data);       

websocket.send(data);       

//然后清空       

$(&#39;#msg&#39;).val(&#39;&#39;);    }   

//链接成功   

websocket.onopen = function (evt) {       

var data = {           

&#39;msgType&#39;: &#39;open&#39;        }       

var data = JSON.stringify(data);       

$("#content >p:last-child").after(&#39;<p> 服务器已连接,开始聊天吧 </p>&#39;);       

websocket.send(data);    };   

//链接断开   

websocket.onclose = function (evt) {       

$("#content >p:last-child").after(&#39;<p> 服务器已断开,请重新连接 </p>&#39;);    };   

//收到服务器消息   

websocket.onmessage = function (evt) {       

//握手成功后,会接受到服务端返回的fd ,msgType = 1       

//字符串格式化成json       

var data = eval(&#39;(&#39; + evt.data + &#39;)&#39;);       

// console.log(evt.data);       

switch (data.msgType) {           

case 1:               

thisFd = data.fd;               

$(&#39;#fd-samp&#39;).html(thisFd);               

$(&#39;#fd&#39;).val(thisFd);               

break;            case 2:               

if (data.nickname == nickname) {                   

data.nickname = &#39;我&#39;;                }               

$("#content >p:last-child").after(&#39;<p>&#39; + data.nickname + &#39; 在 &#39; + data.time + &#39; 说:<br>&#39; + data.data + &#39;</p>&#39;);               

//接收到消息自动触底               

scrolltest();               

break;        }    };   

//服务器异常   

websocket.onerror = function (evt, e) {       

$("#content >p:last-child").after(&#39;<p> 服务器异常 </p>&#39;);    };   

//心跳,本次新增   

function heartbeat() {        var data = {           

&#39;msgType&#39;: &#39;ping&#39;,        }       

//生成json 方便后台接收以及使用       

var data = JSON.stringify(data);       

websocket.send(data);    }   

//30 秒一次   

setInterval(heartbeat, 30000);</script>

登录后复制

服务端代码
协程,都需要在 Co\run(function () {}) 里。

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

<?php   

//定义获取当前的id函数   

function getObjectId(\Swoole\Http\Response $response) {       

if (PHP_VERSION_ID < 70200) {           

$id = spl_object_hash($response);       

} else {           

$id = spl_object_id($response);        }       

return $id;    }   

Co\run(function () {       

$server = new Co\Http\Server(&#39;127.0.0.1&#39;, 9502, false);       

$server->set([           

&#39;heartbeat_idle_time&#39;      => 600,

// 表示一个连接如果600秒内未向服务器发送任何数据,此连接将被强制关闭           

&#39;heartbeat_check_interval&#39; => 60, 

// 表示每60秒遍历一次       

]);       

$server->handle(&#39;/websocket&#39;, function ($request, $ws) {           

$ws->upgrade();           

global $wsObjects;           

$objectId = getObjectId($ws);           

$wsObjects[$objectId] = $ws;           

while (true) {               

$frame = $ws->recv();               

if ($frame === &#39;&#39;) {                   

unset($wsObjects[$objectId]);                   

$ws->close();                   

break;               

} else if ($frame === false) {                   

echo &#39;error : &#39; . swoole_last_error() . "\n";                   

break;                }

else {                   

if ($frame->data == &#39;close&#39; || get_class($frame) === Swoole\WebSocket\CloseFrame::class)

{                       

unset($wsObjects[$objectId]);                       

$ws->close();                       

return;                   

}                   

//格式化接收到json                   

$data = json_decode($frame->data);                   

switch ($data->msgType){                       

case &#39;open&#39;:                           

//链接第一次                           

$data = json_encode([                               

&#39;fd&#39; => $objectId,                               

&#39;msgType&#39; => 1 

//代表第一次连接,前端处理fd                           

]);                           

$ws->push($data);                           

break;                       

case &#39;ping&#39;:                           

//接收到心跳 不作回复

//                           

echo  $data->msgType;                           

break;                       

default :                           

// 原基础上不动,增加一些自定义                           

$data->msgType = 2;

//代表服务器端回复                           

$data->time = date(&#39;Y-m-d H-i-s&#39;);                           

$data = json_encode($data);                           

foreach ($wsObjects as $obj) {                               

$obj->push($data);                           

}                   

}               

}            }       

});       

$server->start();   

});

登录后复制

代码齐全之后,接下来就只需要在控制台执行以下 PHP 文件就行。

然后前台直接访问你的网站地址,我的是本地 127.0.0.1

多开几个窗口模拟多个用户,然后发送消息测试即可:

你好,打工人。

代码很简单,难度不大,但是可以很简洁的反应出 webScoket 和 Swoole 的一种强大。

以上是利用 webSocket 与 Swoole 打造一个小型聊天室(协程)的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板