HTML5 WebSocket 3 の概要 - 通信モデルのソケット.io_javascript スキル-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

HTML5 WebSocket 3 の概要 - 通信モデルのソケット.io_javascript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:43 PM

例

socket.io はなぜ生まれたのですか?以下のテキスト説明を参照してください。

socket.io が必要な理由は何ですか?

Node.js はサーバー側で効率的な動作環境を提供しますが、ブラウザ側での HTML5 のサポートが異なるため、すべてのブラウザと互換性があり、優れたリアルタイムユーザーエクスペリエンスを提供し、クライアントとプログラマー向けのサービス一貫したプログラミングエクスペリエンスを提供するために、socket.io が誕生しました。

socket.io の設計目標は、あらゆるブラウザーとあらゆるモバイルデバイスをサポートすることです。現在、主流の PC ブラウザ (IE、Safari、Chrome、Firefox、Opera など) とモバイルブラウザ (iphone Safari/ipad Safari/android WebKit/WebOS WebKit など) をサポートしています。

Socket.io は、node.js をベースにしており、WebSocket API を簡素化し、さまざまな通信 API を統合します。 WebSocket、Flash Socket、AJAX ロングポーリング、AJAX マルチパートストリーミング、Forever IFrame、JSONP ポーリングをサポートします。

Socket.io は、リアルタイム通信の問題を解決し、サーバーとクライアントのプログラミング方法を統合します。ソケットを開始すると、クライアントとサーバーの間にパイプラインが確立され、双方が相互に通信できるようになります。

インストール

コマンドラインで npm installソケット.io を実行してインストールします。

サーバーサイドプログラミングモデル

サーバー側のプログラミングは通常のサーバーと同じで、サーバーの起動、サービスの提供、イベントの処理が行われます。

たとえば、次のserver.js:

var http = require('http')
  , url = require('url')
  , fs = require('fs')
  , server;
server = http.createServer(function(req, res){
  // your normal server code
  var path = url.parse(req.url).pathname;
  switch (path){
  case '/':
   res.writeHead(200, {'Content-Type': 'text/html'});
   res.write('<h1>Hello! Try the <a href="/index.html">Socket.io Test</a></h1>');
   res.end();
   break;
  case '/index.html':
   fs.readFile(__dirname + path, function(err, data){
    if (err) return send404(res);
    res.writeHead(200, {'Content-Type': path == 'json.js' &#63; 'text/javascript' : 'text/html'})
    res.write(data, 'utf8');
    res.end();
   });
   break;
  default: send404(res);
  }
}),
send404 = function(res){
  res.writeHead(404);
  res.write('404');
  res.end();
};
server.listen(8080);
var io = require('socket.io').listen(server);
io.sockets.on('connection', function(socket){
 console.log("Connection " + socket.id + " accepted.");
 socket.on('message', function(message){
    console.log("Received message: " + message + " - from client " + socket.id);
 });
 socket.on('disconnect', function(){
  console.log("Connection " + socket.id + " terminated.");
 });
});

ログイン後にコピー

クライアントプログラミングモデル

クライアントプログラミングも同様の方法で処理され、サーバーに接続して情報を交換します。

たとえば、次のindex.htmlページ:

<!doctype html>
<html>
 <head>
  <title>Socket.io Test</title>
  <script src="/json.js"></script> <!-- for ie -->
  <script src="/socket.io/socket.io.js"></script>
 </head>
 <body>  
  <script>    
  var socket;
  var firstconnect = true;
  function connect() {
   if(firstconnect) {
    socket = io.connect(null);
    socket.on('message', function(data){ message(data); });
    socket.on('connect', function(){ status_update("Connected to Server"); });
    socket.on('disconnect', function(){ status_update("Disconnected from Server"); });
    socket.on('reconnect', function(){ status_update("Reconnected to Server"); });
    socket.on('reconnecting', function( nextRetry ){ status_update("Reconnecting in " 
     + nextRetry + " seconds"); });
    socket.on('reconnect_failed', function(){ message("Reconnect Failed"); });
    firstconnect = false;
   }
   else {
    socket.socket.reconnect();
   }
  }
  function disconnect() {
   socket.disconnect();
  }
  function message(data) {
   document.getElementById('message').innerHTML = "Server says: " + data;
  }
  function status_update(txt){
   document.getElementById('status').innerHTML = txt;
  }
  function esc(msg){
   return msg.replace(/</g, '<').replace(/>/g, '>');
  }
  function send() {
   socket.send("Hello Server!");  
  };    
  </script>
  <h1>Socket.io Test</h1>
  <div><p id="status">Waiting for input</p></div>
  <div><p id="message"></p></div> 
  <button id="connect" onClick='connect()'/>Connect</button>
  <button id="disconnect" onClick='disconnect()'>Disconnect</button>
  <button id="send" onClick='send()'/>Send Message</button>
 </body>
</html>

ログイン後にコピー

メモ

1. サーバーを起動するには、node のままにしてコマンドラインウィンドウを開き、server.js が存在するフォルダーに移動し、「node server.js」と入力してサーバーを起動します。

上記のindex.html で、次の行に注目してください: 。ローカルのsocket.ioスクリプトを使用したくない場合は、

を実行できます。

次のパブリックスクリプトを直接使用するには:

<script src="http://cdn.socket.io/stable/socket.io.js"></script>

ログイン後にコピー

次の行にも注意してください: socket = io.connect(null)。

ここでの null はローカルサービスへの接続を表しており、これを「localhost」に置き換えても効果は同じになります。

2.socket.io を使用して http サービスを直接開始できます。

例:

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 io.sockets.emit('this', { will: 'be received by everyone'});
});

ログイン後にコピー

3. Socket.io は、send メソッドを通じてメッセージを直接送信し、メッセージイベントを使用してメッセージを受信できます。例:

//server.js
var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('message', function () { });
});
//index.html
<script>
 var socket = io.connect('http://localhost/');
 socket.on('connect', function () {
  socket.send('hi');
  socket.on('message', function (msg) {
   // my msg
  });
 });
</script>

ログイン後にコピー

4. データの送信と処理

両端は相互にイベントを送信し、相互にデータを送信し、相互に通信できます。イベントを送信するコードは次のとおりです。socket.emit(action, data, function)。ここで、action はイベントの名前、data はデータ、function はイベントを処理するコードです。 on(action, function), if Emit sends データがある場合、関数のパラメータにはこのデータが含まれます。組み込みイベント、socket.io の送信と処理に加えて、接続、切断、メッセージなど。また、次のようなカスタムイベントの送信と処理も可能になります。

//サーバー:

io.sockets.on('connection', function (socket) {
 socket.emit('news', { hello: 'world' });
 socket.on('my other event', function (data) {
  console.log(data);
 });
});

ログイン後にコピー

//クライアント:

<script src="/socket.io/socket.io.js"></script>
<script>
 var socket = io.connect('http://localhost');
 socket.on('news', function (data) {
  console.log(data);
  socket.emit('my other event', { my: 'data' });
 });
</script>

ログイン後にコピー

5. 上記からわかるように、データを送信する場合は、send と Emit の両方を使用できます。これは、Emit がカスタムイベントの処理を強化するだけです。

6. サーバー側でソケットの get/set メソッドを使用して、関連データをクライアント側に保存できます。例:

//サーバー

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.on('set nickname', function (name) {
  socket.set('nickname', name, function () { socket.emit('ready'); });
 });
 socket.on('msg', function () {
  socket.get('nickname', function (err, name) {
   console.log('Chat message by ', name);
  });
 });
});

ログイン後にコピー

//クライアント

<script>
 var socket = io.connect('http://localhost');
 socket.on('connect', function () {
  socket.emit('set nickname', confirm('What is your nickname&#63;'));
  socket.on('ready', function () {
   console.log('Connected !');
   socket.emit('msg', confirm('What is your message&#63;'));
  });
 });
</script>

ログイン後にコピー

7. 現在のソケット接続を除くチャットルーム内の全員にメッセージを送信するなど、メッセージをブロードキャストできます。

var io = require('socket.io').listen(80);
io.sockets.on('connection', function (socket) {
 socket.broadcast.emit('user connected');
});

ログイン後にコピー

8. 複数のリンクを確立する代わりに、同じリンク内に複数の独立したチャネルを確立できます。この正式な名前は「複数の名前空間」です。たとえば、公式の例:

var io = require('socket.io').listen(80);
//Server
var chat = io
 .of('/chat')
 .on('connection', function (socket) {
  socket.emit('a message', {
    that: 'only'
   , '/chat': 'will get'
  });
  chat.emit('a message', {
    everyone: 'in'
   , '/chat': 'will get'
  });
 });
var news = io
 .of('/news')
 .on('connection', function (socket) {
  socket.emit('item', { news: 'item' });
 });
//Client
<script>
 var chat = io.connect('http://localhost/chat')
  , news = io.connect('http://localhost/news');
 chat.on('connect', function () {
  chat.emit('hi!');
 });
 news.on('news', function () {
  news.emit('woot');
 });
</script>

ログイン後にコピー

socket.io 構成

socket.io の設定は非常に簡単です。express を設定した場合は、ほぼ同じ方法を使用していることがわかります。まず小さな例を見てみましょう:

var io = require('socket.io').listen(80);
io.configure('production', function(){
 io.enable('browser client etag');
 io.set('log level', 1);
 io.set('transports', [
  'websocket'
 , 'flashsocket'
 , 'htmlfile'
 , 'xhr-polling'
 , 'jsonp-polling'
 ]);
});
io.configure('development', function(){
 io.set('transports', ['websocket']);
});

ログイン後にコピー

ご覧のとおり、socket.io は設定にconfigure、set、enable、disableを使用します。

1.configure メソッドを使用して、さまざまなオペレーティング環境での動作を構成します。つまり、さまざまな環境でさまざまな構成オプションを有効にします。 configure の最初のパラメータは実行環境、2 番目のパラメータは設定用の関数です。通常、実行環境は実稼働環境または開発環境です。もちろん、ここでは任意の文字列を使用できます。 configure の最初のパラメータが省略された場合、後続の設定はパブリックであり、環境に関係なく有効であることを意味します。

2. さまざまな動作環境を設定した後、現在どの環境で実行されているかをどのように設定しますか?これは、コマンドラインで環境変数 NODE_ENV の値を変更することによって実現されます。

3.configure 構成関数では、set、enable、disable を使用して関連オプションを設定できます。

4. 特定の構成可能な項目のリファレンス: https://github.com/LearnBoost/Socket.IO/wiki/Cconfiguring-Socket.IO
実用的なリファレンス

Socket.io の概要: http://davidchambersdesign.com/getting-started-with-socket.io/

socket.io のインストールと使用手順: http://socket.io/

socket.io Wiki: https://github.com/LearnBoost/Socket.IO/wiki

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7613

CakePHP チュートリアル

1387

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

136

Related knowledge

Python 関数入門: exec 関数の概要と例 Nov 03, 2023 pm 02:09 PM

Python 関数の紹介: exec 関数の概要と例はじめに: Python では、exec は、文字列またはファイルに格納されている Python コードを実行するために使用される組み込み関数です。 exec 関数はコードを動的に実行する方法を提供し、プログラムが実行時に必要に応じてコードを生成、変更、実行できるようにします。この記事では、exec 関数の使い方と実用的なコード例を紹介します。 exec 関数の使用方法: exec 関数の基本的な構文は次のとおりです。

Oracle DECODE関数の詳細説明と使用例 Mar 08, 2024 pm 03:51 PM

Oracle の DECODE 関数は、クエリステートメントのさまざまな条件に基づいてさまざまな結果を返すためによく使用される条件式です。この記事ではDECODE関数の構文・使い方・サンプルコードを詳しく紹介します。 1. DECODE 関数の構文 DECODE(expr,search1,result1[,search2,result2,...,default]) expr: 比較する式またはフィールド。検索1、

Go 言語のインデントの仕様と例 Mar 22, 2024 pm 09:33 PM

Go 言語のインデント仕様と例 Go 言語は Google によって開発されたプログラミング言語であり、その簡潔で明確な構文で知られており、インデント仕様はコードの読みやすさと美しさに重要な役割を果たします。この記事ではGo言語のインデントの仕様を紹介し、具体的なコード例を通して詳しく解説します。インデントの仕様 Go 言語では、スペースの代わりにタブがインデントに使用されます。インデントの各レベルは 1 つのタブで、通常はスペース 4 個の幅に設定されます。このような仕様により、コーディングスタイルが統一され、チームが協力してコンパイルできるようになります。

Python関数入門：abs関数の使い方と例 Nov 03, 2023 pm 12:05 PM

Python 関数入門: abs 関数の使い方と例 1. abs 関数の使い方の概要 Python では、abs 関数は、指定された値の絶対値を計算するために使用される組み込み関数です。数値引数を受け入れ、その数値の絶対値を返すことができます。 abs 関数の基本構文は次のとおりです。 abs(x) ここで、x は絶対値を計算する数値パラメータであり、整数または浮動小数点数を指定できます。 2. abs 関数の例以下に、いくつかの具体的な例を通して abs 関数の使用法を示します。例 1: 計算

Python関数入門：isinstance関数の使い方と例 Nov 04, 2023 pm 03:15 PM

Python 関数の紹介: isinstance 関数の使用法と例 Python は、プログラミングをより便利かつ効率的にするための多くの組み込み関数を提供する強力なプログラミング言語です。非常に便利な組み込み関数の 1 つは isinstance() 関数です。この記事では、isinstance関数の使い方と例を紹介し、具体的なコード例を紹介します。 isinstance() 関数は、オブジェクトが指定されたクラスまたは型のインスタンスであるかどうかを判断するために使用されます。この関数の構文は次のとおりです

Python 関数の概要: eval 関数の関数と例 Nov 04, 2023 pm 12:24 PM

Python 関数入門: eval 関数の関数と例 Python プログラミングにおいて、eval 関数は非常に便利な関数です。 eval関数は文字列をプログラムコードとして実行することができ、その機能は非常に強力です。この記事では、eval関数の詳しい機能と使用例を紹介します。 1. eval関数の機能 eval関数の機能は非常にシンプルで、文字列をPythonコードとして実行することができます。これは、文字列を変換できることを意味します

Python 関数の概要: 関数とソート関数の例 Nov 03, 2023 pm 02:47 PM

Python 関数の紹介: 関数とソートされた関数の例 Python は、豊富な組み込み関数とモジュールを備えた非常に強力なプログラミング言語です。この一連の記事では、Python の一般的に使用される関数を 1 つずつ紹介し、読者がこれらの関数をよりよく理解して応用できるように、対応する例を示します。この記事ではsorted関数の機能と例を詳しく紹介します。ソート関数は、反復可能なオブジェクトをソートし、ソートされた新しいリストを返すために使用されます。数字や単語に使用できます

PHPドット演算子の応用例と分析例 Mar 28, 2024 pm 12:06 PM

PHP ドット演算子の応用例と分析例 PHP では、ドット演算子 (「.」) は 2 つの文字列を接続するために使用される演算子であり、文字列を連結するときに非常に一般的に使用され、非常に柔軟です。ドット演算子を使用すると、複数の文字列を簡単に連結して新しい文字列を形成できます。以下では、サンプル分析を通じて PHP ドット演算子の使用法を紹介します。 1. 基本的な使い方まずは基本的な使い方例を見てみましょう。それぞれ 2 つの単語を格納する 2 つの変数 $str1 と $str2 があるとします。

See all articles

HTML5 WebSocket 3 の概要 - 通信モデルのソケット.io_javascript スキル

ホットAIツール

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

人気の記事

ホットツール

メモ帳++7.3.1

SublimeText3 中国語版

ゼンドスタジオ 13.0.1

ドリームウィーバー CS6

SublimeText3 Mac版

ホットトピック