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

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

新規登録して質問してみよう
ただいま回答率
87.20%
WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

【Websocketエラー】WebSocket connection to 'ws:~

ryouya
ryouya

総合スコア14

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

2回答

0評価

1クリップ

1997閲覧

投稿2021/08/07 08:55

お世話になっております。
下記知見のある方がいらっしゃいましたら、ご教示お願いいたします。

#起きている問題

WebSocket connection to 'ws://localhost:8080/' failed:

websocketでブラウザを動かしたいのですが、
上記エラーが発生し、正常に稼働しません。

#試したこと

https://www.fixes.pub/program/388275.html

上記のサイトを参考に、wss://localhost:8080/(index.html:112)に修正し実行しましたが、
結果は変わりませんでした。

#実行ファイル

#index.html <!DOCTYPE html> <html lang="ja"> <meta charset="utf-8"> <title>Chat</title> <style> .container { width: 600px; } .box { overflow: hidden; } .left { background-color: #D3D3D3; padding: 20px; margin: 5px; width: 300px; float: left; } .right { background-color: #ADFF2F; padding: 20px; margin: 5px; width: 300px; float: right; } </style> <script src="http://code.jquery.com/jquery-2.2.4.js"></script> <script> (function($) { var settings = {}; var methods = { init: function(options) { settings = $.extend({ 'uri': 'ws://localhost:8080', 'conn': null, 'message': '#message', 'display': '#display' }, options); $(settings['message']).keypress(methods['checkEvent']); $(this).chat('connect'); }, checkEvent: function(event) { if (event && event.which == 13) { var message = $(settings['message']).val(); if (message && settings['conn']) { settings['conn'].send(message + ''); $(this).chat('drawText', message, 'right'); $(settings['message']).val(''); } } }, connect: function() { if (settings['conn'] == null) { settings['conn'] = new WebSocket(settings['uri']); settings['conn'].onopen = methods['onOpen']; settings['conn'].onmessage = methods['onMessage']; settings['conn'].onclose = methods['onClose']; settings['conn'].onerror = methods['onError']; } }, onOpen: function(event) { $(this).chat('drawText', 'サーバに接続', 'left'); }, onMessage: function(event) { if (event && event.data) { $(this).chat('drawText', event.data, 'left'); } }, onError: function(event) { $(this).chat('drawText', 'エラー発生!', 'left'); }, onClose: function(event) { $(this).chat('drawText', 'サーバと切断', 'left'); settings['conn'] = null; setTimeout(methods['connect'], 1000); }, drawText: function(message, align = 'left') { if (align === 'left') { var inner = $('<div class="left"></div>').text(message); } else { var inner = $('<div class="right"></div>').text(message); } var box = $('<div class="box"></div>').html(inner); $('#chat').prepend(box); }, }; // end of methods $.fn.chat = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method) { return methods.init.apply(this, arguments); } else { $.error('Method ' + method + ' does not exist'); } } // end of function })(jQuery); $(function() { $(this).chat({ 'uri': 'ws://localhost:8080', 'message': '#message', 'display': '#chat' }); }); </script> </head> <body> <input type="text" id="message" size="50" /> <div id="chat" class="container"></div> </body> </html>
#chat-server.php <?php namespace htdocs; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; class Chat implements MessageComponentInterface { protected $clients; public function __construct() { $this->clients = new \SplObjectStorage(); } public function onOpen(ConnectionInterface $conn) { // Store the new connection to send messages to later $this->clients->attach($conn); echo "New connection! ({$conn->resourceId})\n"; } public function onMessage(ConnectionInterface $from, $msg) { $numRecv = count($this->clients) - 1; echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's'); foreach ($this->clients as $client) { if ($from !== $client) { // The sender is not the receiver, send to each client connected $client->send($msg); } } } public function onClose(ConnectionInterface $conn) { // The connection is closed, remove it, as we can no longer send it messages $this->clients->detach($conn); echo "Connection {$conn->resourceId} has disconnected\n"; } public function onError(ConnectionInterface $conn, \Exception $e) { echo "An error has occurred: {$e->getMessage()}\n"; $conn->close(); } }
#Chat.php <?php namespace htdocs; use Ratchet\MessageComponentInterface; use Ratchet\ConnectionInterface; class Chat implements MessageComponentInterface { protected $clients; public function __construct() { $this->clients = new \SplObjectStorage(); } public function onOpen(ConnectionInterface $conn) { // Store the new connection to send messages to later $this->clients->attach($conn); echo "New connection! ({$conn->resourceId})\n"; } public function onMessage(ConnectionInterface $from, $msg) { $numRecv = count($this->clients) - 1; echo sprintf('Connection %d sending message "%s" to %d other connection%s' . "\n", $from->resourceId, $msg, $numRecv, $numRecv == 1 ? '' : 's'); foreach ($this->clients as $client) { if ($from !== $client) { // The sender is not the receiver, send to each client connected $client->send($msg); } } } public function onClose(ConnectionInterface $conn) { // The connection is closed, remove it, as we can no longer send it messages $this->clients->detach($conn); echo "Connection {$conn->resourceId} has disconnected\n"; } public function onError(ConnectionInterface $conn, \Exception $e) { echo "An error has occurred: {$e->getMessage()}\n"; $conn->close(); } }

#GitHub

https://github.com/karirin/chat_app

#参考

http://challenge.no1s.biz/programming/php/158

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

同じタグがついた質問を見る

WebSocket

WebSocketとは双方向・全二重コミュニケーションのためのAPIでありプロトコルのことを指します。WebSocketはHTML5に密接に結びついており、多くのウェブブラウザの最新版に導入されています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。