title: connect peers in gun db
body: <p>I need to understand how to connect peers in gun db. I have a socket.io server deployed on heroku but I don't know if it will work with gun. Can anyone with experience with gun db help me with this? I've readed the documentations but it's not clear how the peers are connected and there isn't a clear code example on the documentation.</p>
  
  <p>I've tested the chat example, but it will not work on my localhost server, I will not be able to deploy it on my shared hosting because sockets are not permitted. Also on localhost messages are not delivered between two different browser windows.</p>
  
  <h2>UPDATE :</h2>
  
  <p>Here is the code with the suggested <code>lib/webrtc</code> added. Still not working.</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;Converse&lt;/title&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0"&gt;
    &lt;link rel="stylesheet" type="text/css" href="../style.css"&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'&gt;
    &lt;style&gt;
      .chat__heading {
        position: fixed;
        text-align: center;
        z-index: 1;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
      }
  
      .chat__form-container {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: 10px 20px;
        position: fixed;
        z-index: 1;
        bottom: 0;
      }
  
      .chat__form {
        display: flex;
        justify-content: center;
        height: 50px;
        background-color: white;
        border: 2px solid white;
        max-width: 900px;
        width: 100%;
        border-radius: 5px;
      }
  
      .chat__name-input {
        flex: 1;
        padding: 10px;
      }
  
      .chat__message-input {
        flex: 5;
        padding: 10px;
      }
  
      .chat__submit {
        padding: 10px;
        color: white;
        border-radius: 5px;
      }
  
      .chat__submit:hover::after {
        background-color: rgba(0,0,0,0.2);
      }
  
      .chat__submit:focus::after {
        background-color: rgba(0,0,0,0.2);
      }
  
      .chat__submit::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 5px;
        transition: background-color 0.3s;
        background-color: rgba(0,0,0,0);
      }
  
      .chat__message-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex: 1;
        overflow-y: auto;
        padding: 60px 20px;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.2);
        min-height: 100vh;
      }
  
      .chat__message {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 5px;
        width: 100%;
        position: relative;
        max-width: 900px;
      }
  
      .chat__name {
        margin-right: 20px;
      }
  
      .chat__when {
        position: absolute;
        top: 0;
        right: 2em;
        padding: 10px;
        background: rgba(100%, 100%, 100%, 0.9);
        opacity: 0;
        border-radius: 5px;
      }
  
      .chat__message:hover .chat__when {
        opacity: 1;
        right: 0em;
      }
  
      @media (max-width: 567px) {
        .chat__heading {
          font-size: 30px;
        }
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="chat hue2 page"&gt;
      &lt;h2 id='title' class="chat__heading hue2 whitet"&gt;Have a Conversation...&lt;/h2&gt;
      &lt;ul class="chat__message-list"&gt;
        &lt;li class="none"&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;div class="chat__form-container hue2"&gt;
        &lt;form class="chat__form"&gt;
          &lt;label for="name-input" class="visually-hidden"&gt;Name&lt;/label&gt;
          &lt;input id="name-input" class="chat__name-input" placeholder="Name"&gt;&lt;/input&gt;
          &lt;label for="message-input" class="visually-hidden"&gt;Message&lt;/label&gt;
          &lt;input id="message-input" class="chat__message-input" placeholder="Write a message..."&gt;&lt;/input&gt;
          &lt;button class="chat__submit say hue2"&gt;say&lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
  
      &lt;div class="model"&gt;
        &lt;li class="chat__message white huet2 box"&gt;
          &lt;b class="chat__name"&gt;&lt;/b&gt;
          &lt;p class="chat__message-text"&gt;&lt;/p&gt;
          &lt;span class="sort none"&gt;0&lt;/span&gt;
          &lt;div class="chat__when"&gt;&lt;/div&gt;
        &lt;/li&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="../jquery.js"&gt;&lt;/script&gt;
    &lt;script src="../../gun.js"&gt;&lt;/script&gt;
    &lt;script src="../../nts.js"&gt;&lt;/script&gt;
    &lt;script src="../../lib/webrtc.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      var gun = Gun(document.location.host + ':443/gun');
      var chat = gun.get('converse/' + location.hash.slice(1));
      console.log(chat);
      console.log(gun);
      console.log(location.hash.slice(1));
  
      $(".chat__submit").on('click', submit);
      $(".chat_form").on('keydown', enter);
      function enter(e) {
        if (e.which !== 13) { return }
        submit(e);
      }
      function submit(e) {
        e.preventDefault();
  
        var msg = { when: Gun.time.is() };
  
        msg.who = $('.chat__name-input').val();
        if (!msg.who) {
          msg.who = 'user' + Gun.text.random(3);
          $('.chat__name-input').val(msg.who);
        }
  
        msg.what = $('.chat__message-input').val();
        if (!msg.what) { return }
  
        chat.set(msg);
        $('.chat__message-input').val('').focus();
      }
  
      chat.map().val(function (msg, id) {
        if (!msg) { return }
        var messageList = $('.chat__message-list');
        var last = sort(msg.when, messageList.children('li').last());
  
        var li = $("#msg-" + id)[0]; // grab if exists
        if (!li) {
          li = $('.model li').clone(true) // else create it
            .attr('id', 'msg-' + id)
            .insertAfter(last);
        }
  
        // bind the message data into the UI
        li = $(li);
        li.find('.chat__name').text(msg.who);
        li.find('.chat__message-text').text(msg.what);
        li.find('.sort').text(msg.when);
  
        var time = new Date(msg.when);
        li.find('.chat__when').text(time.toDateString() + ', ' + time.toLocaleTimeString());
  
        $('html, body').stop(true, true)
          .animate({ scrollTop: messageList.height() });
      });
  
      function sort(num, li) { return parseFloat(num) &gt;= parseFloat($(li).find('.sort').text() || -Infinity) ? li : sort(num, li.prev()) }
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  
  
  </code></pre>