WebSocketでオブジェクトを動かしたい。

最終的にはWebSocket+Node.jsを使ってアメーバピグのようなウェブアプリを作ろうと思っています。
まずWebSocketを理解するために動くサンプルコートを拾ってきて、そこに
divタグで色を付けた四角をサーバーから受け取ったmessageを数値に変換して、位置情報を書き換えるという事をしてみたいのですが、エラーはでないのに、四角が動きません。
JavaScriptも初学者なので、何故動かないかが分かりません。
一応JavaScriptの基本は本を一冊買ったのでifとかforとかwhileは理解しているレベルです。
よろしくお願いします。

ソースコード

<html> <body> <head> <style type="text/css"> <!--

    div.waku
    {
      border:1px solid black;  /* 1pxの黒の枠を付ける */
      width :300px;            /* 横幅を300pxにする */
      height:200px;            /* 縦幅を200pxにする */
      position:relative;       /* 相対位置指定を宣言 */
    }
    
    div.mini
    {
      border:1px solid green;  /* 1pxの緑の枠を付ける */
      width :50px;             /* 横幅を50pxにする */
      height:50px;             /* 縦幅を50pxにする */
    }
    
    div#aka
    {
      background-color:red;    /* 背景色を赤色にする */
      position:absolute;       /* 絶対位置指定を宣言 */
      left:50px;               /* 左から50pxの位置に表示 */
      top:50px;                /* 上から50pxの位置に表示 */
      z-index:2;               /* 奥行番号を２にする */
    }
    
    div#ao
    {
      background-color:blue;   /* 背景色を青にする */
      position:absolute;       /* 絶対位置指定を宣言 */
      left:80px;               /* 左から80pxの位置に表示 */
      top:80px;                /* 上から80pxの位置に表示 */
      z-index:1;               /* 奥行番号を１にする */
    }
    
    -->
    </style>
</head>
<h1>simple chat</h1>
<input id="inputText" type="text">
<input id="sendButton" type="submit">
<ul id="messageList" />
<div class="waku">
<div class="mini" id="aka"></div>
<div class="mini" id="ao"></div>
</div>
<script src="/socket.io/socket.io.js"></script>
<script>

  const socket = io();
  var square = new Array();
      square[0]=document.getElementById("aka");
  var x;
  const clearText = () => {
    document.getElementById('inputText').value = '';
  }

  const addMessageList = (message) => {
      //受け取ったメッセージを追加しておく
      //２つのID付divタグの情報を配列にしておく

    const ul = document.getElementById('messageList');
    const li = document.createElement('li');
    const text = document.createTextNode(message);
    li.appendChild(text);
    ul.appendChild(li);
  };

  document.getElementById('sendButton').addEventListener('click', () => {
    // let inputMessage = document.getElementById('inputText').value;

    // if (inputMessage === '') {
    //   return;
    // }

    // socket.emit('sendMessage', inputMessage);
    socket.emit('sendMessage', "10");
    clearText();
  });

  //  'receiveMessage' イベントの発火を検知
  //  第一引数には受信したメッセージが入る
  socket.on('receiveMessage', (message) => {
    // 受信したメッセージをulタグに挿入
    //受信したメッセージを処理
    addMessageList(message);
    
   var x = x + parseInt(document.createTextNode(message));
   square[0].style.left   = x + x; "px";
   console.log("style.leftに+10しました");
  });
</script>

</body> </html>

サーバー側の処理です。

const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.Server(app);
const io = socketIo(server);

const PORT = 3000;

app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});

server.listen(PORT, () => {
console.log(listening on port ${PORT});
});

io.on('connection', (socket) => {
console.log('user connected');
socket.on('sendMessage', (message) => {
console.log('Message has been sent: ', message);

// 'receiveMessage' というイベントを発火、受信したメッセージを全てのクライアントに対して送信する
io.emit('receiveMessage', message);

});
});

退会済みユーザー

2022/04/18 13:38

Socket.IOはサーバー側の実装が必要ですが、サーバー側のコードも質問欄にご記載いただけますでしょうか。 https://socket.io/docs/v4/server-initialization/

43923298504

2022/04/19 08:21

承知しました。追記します。

行動規範の内容に同意します

回答1件

js
1   var x = x + parseInt(document.createTextNode(message));
2   square[0].style.left   = x + x; "px";

この2行にツッコミどころが多いです。

グローバル変数 x があるのに、ローカル変数 x を宣言していて、どちらを使う意図なのかわからない
グローバル変数 x を使うつもりであれば、その初期値が設定されていない
message の中身がどうなっているのか質問文からは不明だが、document.createTextNode(message) で DOM の Text ノードを作るのは不要に見える
parseInt() の引数に文字列ではなく Text ノードを渡しているので、おそらくパーズ失敗して NaN が返っている
style.left に x の2倍を入れようとしている意図がわからない
style.left の代入文の後に "px"; という意味のない文字列の文が入っている