前台页面

一个插件通常是可以不需要前台页面的，但这里示例了一个聊天室，因此前台需要有一个输入框和聊天内容。

在插件 chatting_room/web 中创建 index.html 文件，并编写以下内容：

<!DOCTYPE html>
<html>
<head>
    <title>Chatting room</title>
</head>
<body>
    <input type="text" placeholder="输入要发送的文字，回车发送..." style="width:100%" />
    <script type="text/javascript" src="/chatting-room/script.js"></script>
</body>
</html>

在插件 chatting_room/web 中创建 script.js 文件，并编写以下内容：

var inputElement = document.querySelector('input');

var ws = new WebSocket(
    (window.location.protocol === 'https:' ? 'wss://' : 'ws://') +
    window.location.host + '/panda/chatting-room/socket-api'
    );

ws.addEventListener('message', event=> {
    var p = document.createElement('p');
    p.innerText = event.data;
    inputElement.after(p)
});

inputElement.addEventListener('keydown',event=>{
    if (event.keyCode == 13) {
        ws.send(inputElement.value)
        inputElement.value = ''
    }
})

这样，前台插件html内容就写好了。

后台服务

插件的后台服务都是在 function.js 文件中的，在这里我们需要用 register_socket_route 方法去注册一个Socket接口供前台调用：

// 在 init_express 钩子调用的时候操作：
add_action('init_express',()=>{
    var userID = 0;
    var users = [];
    // 为聊天室注册一个Socket地址，用于通讯
    register_socket_route('panda/chatting-room','socket-api',{
        callback(ws,req) {
            // 新用户连接到服务器，保存这个用户
            var user = {id: ++userID, ws};
            users.push(user);
            // 发送所有人
            users.forEach(({ws})=>{
                ws.send(`欢迎新用户${user.id}，当前在线人数：${users.length}`);
            });

            ws.on('message',data => {
                // 收到消息，转发给所有人
                users.forEach(({ws})=>{
                    ws.send(`用户${user.id} ：${data}`);
                })
            })

            ws.on('close', () => {
                // 移除这个用户
                var user_index = users.indexOf(user);
                if (user_index >= 0) {

                    users.splice(user_index,1);

                    // 发送所有人
                    users.forEach(({ws})=>{
                        ws.send(`用户${user.id}，已离开聊天室`);
                    });
                }
            });
        }
    });
});

示例

这里有该插件的完整Demo示例，请从此目录下载