learning-jsdp/ch07/observer_pubsub_2.html at main · addyosmani/learning-jsdp · 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
<!DOCTYPE html>
<html>
<head>
  <title>Publish/Subscribe Pattern Example</title>
  <style>
    label {
      display: block;
    }
  </style>
</head>
<body>
  <h2>Publish/Subscribe Pattern Example</h2>

  <h3>Topics</h3>
  <div id="topicsList"></div>

  <h3>Subscriptions</h3>
  <div id="subscriptionsList"></div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const pubsub = (function() {
        const topics = {};
        let subUid = 0;

        return {
          publish: function(topic, data) {
            if (!topics[topic]) {
              return false;
            }

            const subscribers = topics[topic];
            let len = subscribers ? subscribers.length : 0;

            while (len--) {
              subscribers[len].func(data);
            }

            return this;
          },

          subscribe: function(topic, func) {
            if (!topics[topic]) {
              topics[topic] = [];
            }

            const token = (++subUid).toString();
            topics[topic].push({
              token,
              func,
            });

            return token;
          },

          unsubscribe: function(token) {
            for (const topic in topics) {
              if (topics.hasOwnProperty(topic)) {
                const subscribers = topics[topic];
                for (let i = 0; i < subscribers.length; i++) {
                  if (subscribers[i].token === token) {
                    subscribers.splice(i, 1);
                    return token;
                  }
                }
              }
            }

            return null;
          }
        };
      })();

      const topicsList = document.querySelector('#topicsList');
      const subscriptionsList = document.querySelector('#subscriptionsList');

      const createTopicCheckbox = (topic) => {
        const label = document.createElement('label');
        const checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.dataset.topic = topic;
        label.appendChild(checkbox);
        label.appendChild(document.createTextNode(topic));
        return label;
      };

      const createSubscriptionMessage = (topic) => {
        const p = document.createElement('p');
        p.textContent = `Subscribed to topic: ${topic}`;
        return p;
      };

      const handleCheckboxChange = (event) => {
        const checkbox = event.target;
        const topic = checkbox.dataset.topic;

        if (checkbox.checked) {
          const token = pubsub.subscribe(topic, (data) => {
            console.log(`Received message for topic '${topic}':`, data);
          });

          const subscriptionMessage = createSubscriptionMessage(topic);
          subscriptionsList.appendChild(subscriptionMessage);

          checkbox.dataset.token = token;
        } else {
          const token = checkbox.dataset.token;
          if (token) {
            pubsub.unsubscribe(token);
            delete checkbox.dataset.token;
          }

          const subscriptionMessage = Array.from(subscriptionsList.children).find((elem) => {
            return elem.textContent.includes(topic);
          });

          if (subscriptionMessage) {
            subscriptionsList.removeChild(subscriptionMessage);
          }
        }
      };

      const topics = ['topic1', 'topic2', 'topic3'];
      topics.forEach((topic) => {
        const topicCheckbox = createTopicCheckbox(topic);
        topicCheckbox.querySelector('input').addEventListener('change', handleCheckboxChange);
        topicsList.appendChild(topicCheckbox);
      });
    });
  </script>
</body