質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

411閲覧

JqueryのSortableとsocket.ioを用いて並び替えの更新処理を行いたい

kinoko_0129

総合スコア6

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

Socket.IO

Socket.IOはNode.js上で動くライブラリであり、すべてのブラウザとモバイルデバイスでリアルタイムのアプリを作動させる事を目的としています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2022/12/16 15:09

前提

socket.ioとsortableを用いて2人のユーザが同時に並べ替えを行えるようなプログラムを作成しています。1人のユーザが並び替えを行った際にもう1人のユーザの画面も更新するような機能を考えています。現在、socket.emitで並び替えた要素を配列にしてサーバに送信する処理を作成しているのですが、console.logで確認すると空の配列が返ってきてしまう問題が発生しています。
socket.emit('moveLayers', $("#sortable").sortable("toArray"));
の部分が正しく動作していないと考えられるのですが、解決方法を教えていただけないでしょうか。

実現したいこと

socket.emitで並び替えた配列の要素をサーバ側で取得したい

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

サーバ側に正しく配列が送信されていない(空要素の配列になってしまっている)
イメージ説明

該当のソースコード

Javascript(サーバサイド)

1const express = require('express'); 2const http = require('http'); 3const socketIo = require('socket.io'); 4 5const app = express(); 6const server = http.Server(app); 7const io = socketIo(server); 8 9const PORT = 3000; 10 11app.get('/', (req, res) => { 12 res.sendFile(__dirname + '/client.html'); 13}); 14 15server.listen(PORT, () => { 16 console.log(`listening on port ${PORT}`); 17}); 18 19io.on('connection', (socket) => { 20 console.log('connected'); 21 socket.on('moveLayers', function(layers) { 22 console.log(layers); 23 socket.broadcast.emit('moveLayer', layers); 24 }); 25 });

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 const socket = io(); 27 28 $(function() { 29 $('#sortable').sortable({ 30 update: function(event, ui) { 31 console.log(event,ui); 32 socket.emit('moveLayers', $("#sortable").sortable("toArray")); 33 } 34 }); 35 }); 36 37 socket.on('moveLayer', function(layers) { 38 $.each(layers, function() { 39 $("#"+this).appendTo("#sortable"); 40 }); 41 $("#sortable").sortable("refresh"); 42 }); 43 44 </script> 45 46 <ul id="sortable"> 47 <li >項目1</li> 48 <li>項目2</li> 49 <li>項目3</li> 50 </ul> 51 </body> 52</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

並び替えるIDを個別で設定すればうまくいきました。

投稿2022/12/16 19:48

kinoko_0129

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問