ホームページ ウェブフロントエンド jsチュートリアル Node.jsでのsocket.io学習チュートリアルの紹介(3)

Node.jsでのsocket.io学習チュートリアルの紹介(3)

May 03, 2017 am 10:02 AM

この記事では、socket.io の基本的なチュートリアルとアプリケーションをさらに詳しく紹介します。必要な方は、この記事を参照してください。参考までに、以下を見てみましょう。

はじめに

socket.io はイベントに基づいたリアルタイムの双方向通信を提供します。この記事では、socket.io について詳しく紹介します。

静的ファイル

socket.ioは、デフォルトでsocket.io-clientパッケージを通じてsocket.io.min.jsとsocket.io.js.mapのダウンロードを提供します

インスタンスapp.jsを実行します

let app = require('http').createServer() 
let io = require('socket.io')(app)

app.listen(3000);
ログイン後にコピー

http://localhost:3000/socket.io/socket.io.js にアクセスすると、ブラウザで圧縮されたソース コードをロードできます。マップを使用してロードします

この動作を変更できます

socket.io.js のダウンロードを無効にします

方法 1: インスタンス化するときにコントロール パラメーターserveClient 値 false を渡します

let io = require('socket.io')(app, { 
 serveClient: false
})
ログイン後にコピー

方法 2: function serverClient

let app = require('http').createServer() 
let io = require('socket.io')() 
io.serveClient(false) 
io.listen(app) // 或者io.attach(app)
ログイン後にコピー

関数を呼び出す前にサービスが http.Server にバインドされている場合、このメソッドは無効にした後に再度アクセスすると、{"code":0, というプロンプトが表示されます。 "message":"不明なトランスポート"}http.Server,该方法将不起作用

禁用后再次访问将提示{"code":0,"message":"Transport unknown"}

修改静态文件路径

socket.io.js路径可以改变,其默认路径为/socket.io。

实例化时传参

let io = require('socket.io')(app, { 
 path: '/io'
})
ログイン後にコピー

调用函数path

let app = require('http').createServer() 
let io = require('socket.io')() 
io.path('/io') 
io.listen(app)
ログイン後にコピー

如果在调用函数前服务已绑定http.Server,该方法将不起作用

安全策略

socket.io提供了两种安全策略

allowRequest

函数allowRequest有两个参数,第一个参数为收到的握手包(http.request)对象,作为判断依据, success), err是错误对象,success为boolean, false表示阻止建立连接

前端请求带上token

let socket = io('http://localhost:3000?token=abc') 
socket.on('connect', () => { 
 console.log('connect')
})
socket.on('connect_error', err => { 
 socket.disconnect()
 console.log('connect_error', err)
})
ログイン後にコピー

后端allowRequest根据token判断是否继续

let app = require('http').createServer() 
let io = require('socket.io')(app, { 
 allowRequest: (req, cb) => {
 if (req._query && req._query.token === 'abc') return cb(null, true)
 cb(null, false)
 }
});
ログイン後にコピー

origins

可以对源进行限制

1、实例化时限制源

let app = require('http').createServer() 
let io = require('socket.io')(app, { 
 origins: 'http://localhost:3000'
})
ログイン後にコピー

2、origins函数设置源

origins函数有两种形式

origins(string) : 设置运行的源

origins(string, fn(err, success)) : 通过函数判断源是否允许

io.origins('http://localhost:*')

io.origins((origin, cb) => { 
 if (origin === 'http://localhost:3000/') return cb(null, true)
 cb(null, false)
})
ログイン後にコピー

名称空间

名称空间用来对服务端/客户端的连接隔离,有些地方,也称呼名称空间(namespace)为通道(channel)。下面举例对其意义进行说明

我们需要实现一个协同应用,这个应用有两个功能:

  • 协同编辑: 多个用户可以同时编辑一个文档

  • 消息: 用户间可以发送消息

用socket.io实现这个应用,有如下几种形式

1、完全独立: 协同编辑有一个独立服务edit.socket.test ,消息系统一个独立服务message.socket.test

let editSocket = io('edit.socket.test') 
let messageSocket = io('message.socket.test')
ログイン後にコピー

2、名称空间: 只运行一个独立服务,通过名称空间进行隔离

let app = require('http').createServer() 
let io = require('socket.io')(app) 
let editServer = io.of('/edit') 
let messsageServer = io.of('/message') 
editServer.on('connection', socket => { 
 //编辑相关
})
messsageServer.on('connection', socket => { 
 /消息相关
})
ログイン後にコピー
let editSocket = io('socket.test/edit') 
let messageSocket = io('socket.test/message')
ログイン後にコピー

3、事件名约定: 通过为事件名添加进行隔离

let app = require('http').createServer() 
let io = require('socket.io')(app)

io.on('connection', socket => { 
 //编辑相关
 io.emit('edit:test')
 io.on('edit:test', data => {

 })
 //消息相关
 io.emit('message:test')
 io.on('message:test', data => {

 })
}
ログイン後にコピー

通过事件名约定程序的侵入性太大,不利于拆分和重组,不推荐。 而完全独立的模式需要使用两个socket连接,即浪费浏览器允许的并发连接数,又更多消耗服务器资源。使用名称空间即能实现很好的隔离,又不会对资源造成浪费。

默认名称空间

socket.io实例化时自动绑定路径为/的名称空间

let app = require('http').createServer() 
let io = require('socket.io')(app)

io.sockets // io.of('/').sockets 
io.emit // 代理io.of('/').emit, 类似函数有'to', 'in', 'use', 'send', 'write', 'clients', 'compress'
ログイン後にコピー

中间件

socket.io的名空间通过use注册中间件,中间件在客户端与服务端建立连接成功后,connet事件派发前调用一次。

利用中间件数据校验

io.use((socket, next) => { 
 if (socket.request.headers.cookie) return next()
 next(new Error('Authentication error'))
})
ログイン後にコピー

利用中间件提取或转换数据 io.use((socket, next) => { <br/>getInfo(socket.request.query.id, (err, data) => { if (err) return next(err) socket.custom = data next() }) })

静的ファイルのパスを変更します

socket.io.js のパスは変更できます。デフォルトのパスは /socket.io です。
  • インスタンス化中にパラメータを渡す

    socket.join(&#39;room name&#39;) //进入 
    socket.leave(&#39;room name&#39;) //退出
    ログイン後にコピー
    ログイン後にコピー

    関数のパスを呼び出す
  • io.to(&#39;some room&#39;).emit(&#39;some event&#39;) // io.to与io.in同义,向某个聊天室的所有成员发送消息
    ログイン後にコピー
    ログイン後にコピー
  • 関数を呼び出す前にサービスが http.Server にバインドされている場合、このメソッドは機能しません


  • セキュリティ ポリシー


socket.ioは2つのセキュリティ戦略を提供します

allowRequest
  • 関数allowRequestには2つのパラメータがあり、最初のパラメータは受信したハンドシェイクパケット(http.request)オブジェクトを基礎としています。判定用、success)、err はエラー オブジェクト、success はブール値、false は接続の確立を妨げることを意味します🎜🎜フロントエンド リクエストはトークンをもたらします🎜
    socket.on(&#39;say to someone&#39;, (id, msg) => { 
     socket.broadcast.to(id).emit(&#39;my message&#39;, msg)
    })
    ログイン後にコピー
    ログイン後にコピー
    🎜バックエンドのallowRequestはトークンに基づいて続行するかどうかを決定します🎜
    io.on(&#39;connection&#39;, socket => { 
     socket.emit(&#39;an event&#39;, { some: &#39;data&#39; }) //普通消息
    
     socket.emit(&#39;ferret&#39;, &#39;tobi&#39;, function (data) { //应答消息
     console.log(data); // data will be &#39;woot&#39;
     })
    })
    ログイン後にコピー
    ログイン後にコピー
    🎜🎜origins🎜🎜🎜🎜はい ソースを制限します🎜🎜1. インスタンス化するときにソースを制限します🎜🎜🎜origins 関数には 2 つの形式があります🎜🎜🎜origins( string): 実行のソースを設定します 🎜🎜🎜origins(string, fn(err, success)): ソースが関数 🎜
    socket.on(&#39;ferret&#39;, (name, fn) => { 
     fn(&#39;woot&#39;)
    })
    ログイン後にコピー
    ログイン後にコピー
    🎜🎜🎜Namespace を通じて許可されているかどうかを決定します🎜🎜🎜🎜🎜名前空間はサーバー/クライアント接続の分離に使用され、場所によっては名前空間 (ネームスペース) チャネル (チャネル) とも呼ばれます。次の例でその重要性を説明します🎜🎜このアプリケーションには 2 つの機能があります:🎜🎜🎜🎜共同編集: 複数のユーザーが同時にドキュメントを編集できます🎜🎜🎜🎜メッセージ: ユーザー間でメッセージを送信できます。相互に🎜 🎜🎜🎜🎜 このアプリケーションを実装するには、socket.io を使用します。このアプリケーションには次の形式があります 🎜🎜1. 完全に独立: 共同編集用の独立したサービス edit.socket.test があります。メッセージング システムの独立したサービス message.socket.test🎜
    // 客户端发送消息
    socket.emit(&#39;hello&#39;, &#39;can you hear me?&#39;, 1, 2, &#39;abc&#39;);
    
    // 向所有连接的客户端(除了自己)发送消息
    socket.broadcast.emit(&#39;broadcast&#39;, &#39;hello friends!&#39;);
    
    // 向game聊天室发送消息,自己不算
    socket.to(&#39;game&#39;).emit(&#39;nice game&#39;, "let&#39;s play a game");
    
    // 同时向game1和game2聊天室发送消息,自己不算
    socket.to(&#39;game1&#39;).to(&#39;game2&#39;).emit(&#39;nice game&#39;, "let&#39;s play a game (too)");
    
    // 向game聊天室的所有人发送消息
    io.in(&#39;game&#39;).emit(&#39;big-announcement&#39;, &#39;the game will start soon&#39;);
    
    // 发送消息到<socketid>客户端
    socket.to(<socketid>).emit(&#39;hey&#39;, &#39;I just met you&#39;);
    // 发送应答消息
    socket.emit(&#39;question&#39;, &#39;do you think so?&#39;, function (answer) {});
    ログイン後にコピー
    ログイン後にコピー
    🎜2. 名前空間: 独立したサービスを 1 つだけ実行し、名前空間を通じて分離します🎜rrreeerrreee🎜3. イベント名の規則: イベント名を追加して分離します🎜 rrreee🎜イベントを通じて 名義変更手続きは煩雑であり、分割・再編に資しないため、お勧めできません。 完全に独立したモードでは 2 つのソケット接続を使用する必要があるため、ブラウザーで許可されている同時接続の数が無駄になり、より多くのサーバー リソースが消費されます。名前空間を使用すると、リソースを無駄にすることなく適切な分離を実現できます。 🎜🎜🎜🎜デフォルトの名前空間🎜🎜🎜🎜🎜socket.ioは、インスタンス化するときに名前空間をパス/で自動的にバインドします🎜rrreee🎜🎜🎜ミドルウェア🎜🎜🎜🎜🎜socket.ioの名前空間は、 use を通じてミドルウェアを登録しますware はその後 1 回呼び出されますクライアントとサーバー間の接続が正常に確立され、connet イベントが送出される前。 🎜🎜データ検証にミドルウェアを使用する🎜rrreee🎜ミドルウェアを使用してデータを抽出または変換する io.use((socket, next) => { 🎜getInfo(socket.request.query.id, (err, data) = > { if (err) return next(err)ソケット.custom = data next() }) })🎜🎜🎜allowRequestとの比較🎜🎜🎜🎜allowRequestはいくつかの検証と抽出を実行できますが、なぜそれでも行うのですかミドルウェアが必要ですか?🎜🎜🎜🎜リクエストによって渡される http.request インスタンスを許可し、ミドルウェアはデータ ソケット インスタンスに出入りします。ソケット インスタンスにはリクエスト インスタンスが含まれており、詳細情報が含まれています。🎜🎜🎜🎜ミドルウェアは複数のデータを直接サポートします。非同期プロセスの埋め込みを設定し、allowRequest を自分で実装する必要があります🎜🎜🎜🎜🎜🎜接続イベントと比較して、数値検証や抽出にも使用できます。ミドルウェアが必要ですか?🎜🎜🎜🎜ミドルウェアは直接複数の非同期プロセスのネストをサポートしており、allowRequest は自分で実装する必要があります🎜
  • 中间件成功后到connection事件发送成功前,socket.io还做了一些工作,比如把socket实例添加到connected对象中,加入聊天室等。如果因为权限中断连接,在中间件中处理更省资源.

聊天室

聊天室是对当前连接的socket集合根据特定规则进行归组,方便群发消息。可以类比QQ群的概率.

socket.join(&#39;room name&#39;) //进入 
socket.leave(&#39;room name&#39;) //退出
ログイン後にコピー
ログイン後にコピー
io.to(&#39;some room&#39;).emit(&#39;some event&#39;) // io.to与io.in同义,向某个聊天室的所有成员发送消息
ログイン後にコピー
ログイン後にコピー

默认聊天室

每个socket在连接成功后会自动创建一个默认个聊天室,这个聊天室的名字是当前socket的id,可以通过默认聊天室实现向特定用户发送消息

socket.on(&#39;say to someone&#39;, (id, msg) => { 
 socket.broadcast.to(id).emit(&#39;my message&#39;, msg)
})
ログイン後にコピー
ログイン後にコピー

消息发送

应答消息

普通消息不需要回应,而应答消息提供了应答机制

io.on(&#39;connection&#39;, socket => { 
 socket.emit(&#39;an event&#39;, { some: &#39;data&#39; }) //普通消息

 socket.emit(&#39;ferret&#39;, &#39;tobi&#39;, function (data) { //应答消息
 console.log(data); // data will be &#39;woot&#39;
 })
})
ログイン後にコピー
ログイン後にコピー


socket.on(&#39;ferret&#39;, (name, fn) => { 
 fn(&#39;woot&#39;)
})
ログイン後にコピー
ログイン後にコピー

压缩

socket.compress(true)启用压缩,调用后当前连接的所有数据在传递给客户端前都会进行压缩

volatile标志

socket.io在正常情况下对发送的消息进行追踪,确保消息发送成功,而设置volatile后发送消息,socket.io不会对消息追踪,消息可能丢失

分类

// 客户端发送消息
socket.emit(&#39;hello&#39;, &#39;can you hear me?&#39;, 1, 2, &#39;abc&#39;);

// 向所有连接的客户端(除了自己)发送消息
socket.broadcast.emit(&#39;broadcast&#39;, &#39;hello friends!&#39;);

// 向game聊天室发送消息,自己不算
socket.to(&#39;game&#39;).emit(&#39;nice game&#39;, "let&#39;s play a game");

// 同时向game1和game2聊天室发送消息,自己不算
socket.to(&#39;game1&#39;).to(&#39;game2&#39;).emit(&#39;nice game&#39;, "let&#39;s play a game (too)");

// 向game聊天室的所有人发送消息
io.in(&#39;game&#39;).emit(&#39;big-announcement&#39;, &#39;the game will start soon&#39;);

// 发送消息到<socketid>客户端
socket.to(<socketid>).emit(&#39;hey&#39;, &#39;I just met you&#39;);
// 发送应答消息
socket.emit(&#39;question&#39;, &#39;do you think so?&#39;, function (answer) {});
ログイン後にコピー
ログイン後にコピー

以上がNode.jsでのsocket.io学習チュートリアルの紹介(3)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Nodeのメモリ制御に関する記事 Nodeのメモリ制御に関する記事 Apr 26, 2023 pm 05:37 PM

ノンブロッキングおよびイベント駆動に基づいて構築されたノード サービスには、メモリ消費量が少ないという利点があり、大量のネットワーク リクエストの処理に非常に適しています。大量のリクエストを前提として、「メモリ制御」に関する問題を考慮する必要があります。 1. V8 のガベージ コレクション メカニズムとメモリ制限 Js はガベージ コレクション マシンによって制御されます

Node V8 エンジンのメモリと GC の詳細な図による説明 Node V8 エンジンのメモリと GC の詳細な図による説明 Mar 29, 2023 pm 06:02 PM

この記事では、NodeJS V8 エンジンのメモリとガベージ コレクター (GC) について詳しく説明します。

Node の File モジュールについて詳しく説明しましょう Node の File モジュールについて詳しく説明しましょう Apr 24, 2023 pm 05:49 PM

ファイル モジュールは、ファイルの読み取り/書き込み/開く/閉じる/削除の追加など、基礎となるファイル操作をカプセル化したものです。ファイル モジュールの最大の特徴は、すべてのメソッドが **同期** と ** の 2 つのバージョンを提供することです。 asynchronous**、sync サフィックスが付いているメソッドはすべて同期メソッドであり、持たないメソッドはすべて異種メソッドです。

最適な Node.js Docker イメージを選択する方法について話しましょう。 最適な Node.js Docker イメージを選択する方法について話しましょう。 Dec 13, 2022 pm 08:00 PM

ノード用の Docker イメージの選択は些細なことのように思えるかもしれませんが、イメージのサイズと潜在的な脆弱性は、CI/CD プロセスとセキュリティに大きな影響を与える可能性があります。では、最適な Node.js Docker イメージを選択するにはどうすればよいでしょうか?

Node.js 19 が正式リリースされました。その 6 つの主要な機能についてお話しましょう。 Node.js 19 が正式リリースされました。その 6 つの主要な機能についてお話しましょう。 Nov 16, 2022 pm 08:34 PM

Node 19 が正式リリースされましたので、この記事では Node.js 19 の 6 つの主要な機能について詳しく説明します。

Node.js の GC (ガベージ コレクション) メカニズムについて話しましょう Node.js の GC (ガベージ コレクション) メカニズムについて話しましょう Nov 29, 2022 pm 08:44 PM

Node.js はどのように GC (ガベージ コレクション) を行うのでしょうか?次の記事で詳しく説明します。

Nodeのイベントループについて話しましょう Nodeのイベントループについて話しましょう Apr 11, 2023 pm 07:08 PM

イベント ループは Node.js の基本的な部分であり、メイン スレッドがブロックされていないことを確認することで非同期プログラミングが可能になります。イベント ループを理解することは、効率的なアプリケーションを構築するために重要です。次の記事では、Node のイベント ループについて詳しく説明します。お役に立てれば幸いです。

ノードがnpmコマンドを使用できない場合はどうすればよいですか? ノードがnpmコマンドを使用できない場合はどうすればよいですか? Feb 08, 2023 am 10:09 AM

ノードが npm コマンドを使用できない理由は、環境変数が正しく設定されていないためです。解決策は次のとおりです: 1. 「システムのプロパティ」を開きます; 2. 「環境変数」->「システム変数」を見つけて、環境を編集します。変数; 3.nodejs フォルダーの場所を見つけます; 4.「OK」をクリックします。

See all articles