jqueryUIのsortableとsocket.ioを使用してリアルタイム通信を行いたい

前提

jqueryUIのSortableとsocket.ioを使用して 2人のユーザーが同時に JQuery UI の並べ替え可能なリストを表示できるようにしようとしています。1人のユーザーが変更を加えたときに、両方のユーザーリストを更新したいと考えています。
以下のサイトを参考にしてプログラムを作成しています。

https://stackoverflow.com/questions/16434301/jquery-ui-sortable-re-sort-list-on-index-change

発生している問題・エラーメッセージ

エラーメッセージは出力されないのですが、並び替えた際にもう一つのクライアントに反映されていない問題が発生しています。

該当のソースコード

server.js

javascript
1const express = require("express");
2const app = express();
3const http = require("http");
4const server = http.createServer(app);
5const { Server } = require("socket.io");
6const io = new Server(server); 
7
8app.get("/", (req, res) => {
9    res.sendFile(__dirname + "/client.html");
10});
11
12io.on('connection', function(socket){
13  console.log('a user connected');
14  socket.on('moveLayers', function(layers) {
15    socket.broadcast.emit('moveLayer', layers);
16  });
17});
18
19server.listen(3000, () => {
20    console.log("listening on *:3000");
21});

client.html

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>並べ替え問題</title>
5  </head>
6
7
8  <body>
9
10
11    <!-- jQuery -->
12    <script
13    src="https://code.jquery.com/jquery-3.6.0.js"
14    integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
15    crossorigin="anonymous"></script>
16
17    <!-- jQuery UI -->
18    <script
19    src="https://code.jquery.com/ui/1.13.0/jquery-ui.js"
20    integrity="sha256-xH4q8N0pEzrZMaRmd7gQVcTZiFei+HfRTBPJ1OGXC0k="
21    crossorigin="anonymous"></script>
22    <script src="/socket.io/socket.io.js"></script>
23
24  <script>
25
26    $( function() {
27      $( "#sortable" ).sortable();
28    });
29
30    var socket = io();
31
32    $("#sortable").on( "sortstop", function( event, ui ) {
33    // Send new list of layers to everyone
34    socket.emit('moveLayers', $( "#sortable" ).sortable( "toArray" ));
35    });
36
37    socket.on('moveLayer', function(layers) {
38        console.log(layers);
39        $.each(layers, function() {
40            $("#"+this).appendTo("#sortable");
41        });
42        $("#sortable").sortable( "refresh" );
43    });
44    
45  </script>
46
47    <ul id="sortable">
48      <li>項目1</li>
49      <li>項目2</li>
50      <li>項目3</li>
51    </ul>
52  </body>
53</html>

退会済みユーザー

2022/11/11 22:50 編集

まず、基本的なところですが、Sortableやsocket.ioの公式のドキュメントは確認されましたか？そのSOの記事は9年以上前のものです。長年経過して API の使い方も変わっている可能性が高いです。・エラーメッセージは出力されないことを確認するだけでは、デバッグとしては全く不十分と言わざるを得ません。コードの要所にconsole.log(～～)を入れて、「入力と、その入力に伴うデータの受け渡し、出力が想定通りになっていること」を確認されていますか？想定通りいっていないなら、まずその原因を調べ、それでもわからなければ、・調べたこと・試したこと・どこが想定通りでないのか・期待する動作は何なのかを具体的かつ明確に質問に記載してください。