
前提
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>


あなたの回答
tips
プレビュー