之前我们是不是用融云api写过一个聊天融云即时通讯在线聊天（yii2.0）

接下来为我们的聊天打基础，先了解下websocket

什么是websocket呢？
websocket是一个协议，它仅仅就是一个协议而已，跟我们所了解的http协议、https协议、ftp协议等等一样，都是一种单纯的协议。

相对于Http这种非持久连接而言，websocket协议是一种持久化连接，它是一种独立的，基于TCP的协议。基于websocket，我们可以实现客户端和服务端双向通信。

websocket是双向持久连接，客户端和服务端只需要第一次建立连接即可实现双向通信，说到这里，你肯定明白我们学习websocket要做什么了。没错，基于websocket，我们可以做一些通讯，推送相关的服务。

swoole内置的websocket服务器，异步非阻塞多进程，牛逼的swoole！

说了很多废话了，上代码

创建websocket服务器

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
<?php
namespace console\controllers;
use yii\console\Controller;
class WebSocketController extends Controller
{
    public function actionTest()
    {
        echo '启动websocket' . PHP_EOL;
        $serv = new \swoole_websocket_server("127.0.0.1", 9501);
        $serv->set([
            'worker_num' => 1,
        ]);
        $serv->on('open', [$this, 'onOpen']);
        $serv->on('message', [$this, 'onMessage']);
        $serv->on('close', [$this, 'onClose']);
        $serv->start();
    }
    /**
     * 客户端与服务端建立连接的时候将触发该回调,回调的第二个参数是swoole_http_request对象，包括了http握手的一些信息，比如GET\COOKIE等
     * @param $serv
     * @param $request
     */
    public function onOpen(\swoole_websocket_server $serv, $request)
    {
        echo "server: handshake success with fd{$request->fd}.\n";
    }
    /**
     * 这个是服务端收到客户端信息后回调，在该回调内我们调用了swoole_websocket_server::push方法向客户端推送了数据，注意哦，push的第一个参数只能是websocket客户端的标识
     * @param $serv
     * @param $frame
     */
    public function onMessage(\swoole_websocket_server $serv, $frame)
    {
        // 循环当前的所有连接，并把接收到的客户端信息全部发送
        foreach ($serv->connections as $fd) {
            $serv->push($fd, $frame->data);
        }
    }
    public function onClose(\swoole_websocket_server $serv, $fd)
    {
        echo "client {$fd} closed.\n";
    }
}
  1. onOpen回调：客户端与服务端建立连接的时候将触发该回调，回调的第二个参数是swoole_http_request对象，包括了http握手的一些信息，比如GET\COOKIE等
  2. onMessage回调：这个是服务端收到客户端信息后回调，在该回调内我们调用了swoole_websocket_server::push方法向客户端推送了数据，注意哦，push的第一个参数只能是websocket客户端的标识

在来看看页面js

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
<div>
    <textarea name="content" id="content" cols="30" rows="10"></textarea>
    <button onclick="send();">发送</button>
</div>
<div class="list" style="border: solid 1px #ccc; margin-top: 10px;">
    <ul id="ul">
    </ul>
</div>
<script>
    var ws = new WebSocket('ws://127.0.0.1:9501');
    ws.onopen = function(event) {
//        ws.send('This is websocket client.');
    };
    ws.onmessage = function(event) {
        var data = event.data;
        var ul = document.getElementById('ul');
        var li = document.createElement('li');
        li.innerHTML = data;
        ul.appendChild(li);
    };
    ws.onclose = function(event) {
        console.log('Client has closed.\n', event);
    };
    function send() {
        var obj = document.getElementById('content');
        var content = obj.value;
        ws.send(content);
    }
</script>

其实做到这里已经是一个简易的聊天室了