inputmanjs-comment-component-socketio-sample/index.html at main · MESCIUSJP/inputmanjs-comment-component-socketio-sample · GitHub

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment Application</title>
    <link href="https://cdn.mescius.com/inputmanjs/hosted/comment/css/gc.inputman.comment.css" rel="stylesheet">
    <script src="https://cdn.mescius.com/inputmanjs/hosted/comment/scripts/gc.inputman.comment.ja.js"></script>
    <script src="assets/socket.io.js"></script>
</head>

<body>
    <div id="gcComment"></div>
    <script>
        // URL定義
        const baseURL = window.location.origin;
        const commentURL = `${baseURL}/comments`;
        const userURL = `${baseURL}/users`;
        const reactionURL = `${baseURL}/reactions`;

        // socketioを初期化
        const socket = io();
        let gcComment = null;

        // サーバーと接続を確立
        socket.on('connect', () => {
            gcComment = new GC.InputMan.GcComment(document.getElementById('gcComment'), {
                commentMode: GC.InputMan.GcCommentMode.ChatMode,
                dataSource: {
                    enabled: true,
                    remote: {
                        comments: {
                            read: { url: commentURL },
                            create: { url: commentURL, requestData: { socketId: socket.id } },
                            update: { url: commentURL, requestData: { socketId: socket.id } },
                            delete: { url: commentURL, requestData: { socketId: socket.id } }
                        },
                        users: {
                            read: { url: userURL }
                        },
                        reactions: {
                            read: { url: reactionURL },
                            create: { url: reactionURL, requestData: { socketId: socket.id } },
                            delete: { url: reactionURL, requestData: { socketId: socket.id } }
                        }
                    }
                },
                addCommentEditorPosition: GC.InputMan.GcCommentEditorPosition.Top,
                userInfo: {
                    id: '0',
                    name: "森上 偉久馬",
                    avatar: 'https://demo.mescius.jp/inputmanjs/demos/ja/samples/comment/commentMode/threadMode/img/avatar1.png',
                    avatarType: 'square',
                }
            });
        });

        /**
         * サーバー側で定義されているcommentupdatedおよびreactionupdatedイベントの発火を検知します。
         * クライアント側は最新のコメント/リアクションの状態をサーバー側と同期する必要があります。
         * DataSourceを使用しているため、コメントやリアクションの追加、更新、削除の操作は既にサーバー側で処理されています。再度サーバーに送信する必要はありません。
         * ここではサーバー側で更新した内容を他のクライアント側に通知する処理になります。
         */

        // サーバー側で定義されているcommentupdatedイベントの発火を検知します。
        socket.on('commentupdated', (msg) => {
            handleCommentsChange(msg);
        });

        //  サーバー側で定義されているreactionupdatedイベントの発火を検知します。
        socket.on('reactionupdated', (msg) => {
            handleReactionChange(msg);
        });

        function handleCommentsChange(msg) {
            switch (msg.type) {
                case 'add':
                    gcComment.execCommand(GC.InputMan.GcCommentCommand.AddCommentElement, {
                        comment: {
                            ...msg.comment,
                            postTime: new Date(msg.comment.postTime),
                            updateTime: new Date(msg.comment.updateTime),
                        },
                        scrollIntoView: true
                    });
                    break;

                case 'delete':
                    gcComment.execCommand(GC.InputMan.GcCommentCommand.DeleteCommentElement, {
                        commentId: msg.comment.id
                    });
                    break;

                case 'update':
                    const comment = getComment(gcComment.comments, msg.comment.id);
                    if (comment) {
                        gcComment.execCommand(GC.InputMan.GcCommentCommand.UpdateCommentElement, {
                            comment: {
                                ...comment,
                                content: msg.comment.content,
                                updateTime: new Date(msg.comment.updateTime)
                            }
                        });
                    }
                    break;

                default:
                    return;
            }
        }

        function handleReactionChange(msg) {
            console.log(msg);
            const comment = getComment(gcComment.comments, msg.commentId);
            if (comment) {
                console.log(msg.reactionInfo);
                gcComment.execCommand(GC.InputMan.GcCommentCommand.UpdateCommentElement, {
                    comment: {
                        ...comment,
                        reactions: msg.reactionInfo
                    },
                });
            }

        }

        function getComment(comments, commentId) {
            for (let i = 0; i < comments.length; i++) {
                if (comments[i].id === commentId) {
                    return comments[i];
                }
                if (Array.isArray(comments[i].replies)) {
                    const res = getComment(comments[i].replies, commentId);
                    if (res) return res;
                }
            }
            return null;
        }
    </script>
</body>

</html>