Vue and websocket #94

Activity

1. Hywan commented on Jun 12, 2017

   

   Hywan

   on Jun 12, 2017

   Member

   More actions

   Maybe a little bit of code would help a lot :-).
2. Hywan

   self-assigned this

   on Jun 12, 2017
3. Hywan

   added

   difficulty: casual

   enhancement

   in progress

   on Jun 12, 2017
4. YnievesDotNet commented on Jun 12, 2017

   

   YnievesDotNet

   on Jun 12, 2017

   Author

   More actions

   That is my code

   ...
           <input type="text" id="input" placeholder="Message…" />
           <hr />
           <pre id="output"></pre>
   ...
   <script>
       var host   = 'ws://127.0.0.1:8000';
       var socket = null;
       var input  = document.getElementById('input');
       var output = document.getElementById('output');
       var print  = function (message) {
           var samp       = document.createElement('samp');
           samp.innerHTML = message + '\n';
           output.appendChild(samp);
   
           return;
       };
   
       input.addEventListener('keyup', function (evt) {
           if (13 === evt.keyCode) {
               var msg = input.value;
   
               if (!msg) {
                   return;
               }
   
               try {
                   socket.send(msg);
                   input.value = '';
                   input.focus();
               } catch (e) {
                   console.log(e);
               }
   
               return;
           }
       });
   
       try {
           socket = new WebSocket(host);
           socket.onopen = function () {
               print('connection is opened');
               input.focus();
   
               return;
           };
           socket.onmessage = function (msg) {
               print(msg.data);
   
               return;
           };
           socket.onclose = function () {
               print('connection is closed');
   
               return;
           };
       } catch (e) {
           console.log(e);
       }
   </script>
   <script src="/js/app.js"></script>
   

   Thanks, Yoinier.
5. Pierozi commented on Jun 12, 2017

   

   Pierozi

   on Jun 12, 2017

   Member

   More actions

   Hello @YnievesDotNet
   This error means the DomElement input is not yet ready when the Javascript is executed.
   You should embed the javascript code on function and execute it after the onload event.