swool(php線上實現簡易聊天室功能)

一.  php後臺代碼 :php

 1 <?php
 2 class Chat
 3 {
 4     const HOST = '0.0.0.0';//ip地址 0.0.0.0表明接受全部ip的訪問
 5     const PART = 81;//端口號
 6     private $server = null;//單例存放websocket_server對象
 7     private $connectList = [];//客戶端的id集合
 8     
 9     public function __construct()
10     {
11         //實例化swoole_websocket_server並存儲在咱們Chat類中的屬性上,達到單例的設計
12         $this->server = new swoole_websocket_server(self::HOST, self::PART);
13         //監聽鏈接事件
14         $this->server->on('open', [$this, 'onOpen']);
15         //監聽接收消息事件
16         $this->server->on('message', [$this, 'onMessage']);
17         //監聽關閉事件
18         $this->server->on('close', [$this, 'onClose']);
19         //設置容許訪問靜態文件
20         //$this->server->set([
21          //   'document_root' => '/grx/swoole/public',//這裏傳入靜態文件的目錄
22         //    'enable_static_handler' => true//容許訪問靜態文件
23         //]);
24         //開啓服務
25         $this->server->start();
26     }
27     /**
28      * 鏈接成功回調函數
29      * @param $server
30      * @param $request
31      */
32     public function onOpen($server, $request)
33     {
34         echo $request->fd . '鏈接了' . PHP_EOL;//打印到咱們終端
35         $this->connectList[] = $request->fd;//將請求對象上的fd,也就是客戶端的惟一標識,能夠把它理解爲客戶端id,存入集合中
36     }
37 
38     /**
39      * 接收到信息的回調函數
40      * @param $server
41      * @param $frame
42      */
43     public function onMessage($server, $frame)
44     {
45         echo $frame->fd . '來了,說:' . $frame->data . PHP_EOL;//打印到咱們終端
46         //將這個用戶的信息存入集合
47         foreach ($this->connectList as $fd) {//遍歷客戶端的集合,拿到每一個在線的客戶端id
48             //將客戶端發來的消息,推送給全部用戶,也能夠叫廣播給全部在線客戶端
49             $server->push($fd, json_encode(['no' => $frame->fd, 'msg' => $frame->data]));
50         }
51     }
52 
53     /**
54      * 斷開鏈接回調函數
55      * @param $server
56      * @param $fd
57      */
58     public function onClose($server, $fd)
59     {
60         echo $fd . '走了' . PHP_EOL;//打印到咱們終端
61         $this->connectList = array_diff($this->connectList, [$fd]);//將斷開了的客戶端id,清除出集合
62     }
63     
64 }
65 
66 $obj = new Chat();

二 . html 前臺頁面html

 1 <!doctype html>
 2 
 3 <html>
 4 
 5 <head>
 6 
 7     <meta charset="utf-8">
 8 
 9     <title>聊天室</title>
10 
11     <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
12 
13 </head>
14 
15 <body>
16 
17 <textarea class="log" style="width: 100%; height: 500px;">
18 
19 =======聊天室======
20 
21 </textarea>
22 
23 <input type="button" value="鏈接" onClick="link()">
24 
25 <input type="button" value="斷開" onClick="dis()">
26 
27 <input type="text" id="text">
28 
29 <input type="button" value="發送" onClick="send()">
30 
31 <script>
32 
33     function link(){
34 
35         var url='ws://152.136.159.165:81';
36 
37         socket=new WebSocket(url);
38 
39         socket.onopen=function(){log1('鏈接成功')}
40 
41         socket.onmessage=function(msg){log(msg.data);console.log(msg);}
42 
43         socket.onclose=function(){log1('斷開鏈接')}
44 
45     }
46 
47     function dis(){
48 
49         socket.close();
50 
51         socket=null;
52 
53     }
54 
55     function log1(var1) {
56         $('.log').append(var1+'\r\n');
57     }
58     function log(var1){
59       var  v=$.parseJSON(var1)
60         $('.log').append('用戶'+v['no']+'說:'+v['msg']+'\r\n');
61         $('#text').val('');
62     }
63 
64     function send(){
65         var text=$('#text').val();
66 
67         socket.send(text);
68     }
69 
70     function send2(){
71 
72         var json = JSON.stringify({'type':'php','msg':$('#text2').attr('value')})
73 
74         socket.send(json);
75 
76     }
77 
78 </script>
79 
80 </body>
81 
82 </html>
相關文章
相關標籤/搜索