ホームページ > ウェブフロントエンド > jsチュートリアル > チャット機能を実装するnode.js+socket.ioの詳細説明

チャット機能を実装するnode.js+socket.ioの詳細説明

零下一度
リリース: 2017-07-02 10:17:12
オリジナル
2201 人が閲覧しました

この記事は主にポイントツーポイントのランダムマッチングチャットを実装するためのnode.jsとsocket.ioを紹介しています。興味のある友人はそれを参照してください

で頻繁にメモを公開できる人は本当に尊敬します。実は、私も頻繁に送信したいのですが、スキルが不十分で、マスターからもっと学ぶ必要があります。少し前に、爆弾プラットフォームに付属のソケットを使用してチャット ルームを作成しました。実は、今回はランダムプライベートチャットを実装するために、node を使って何かを作るのは初めてでしたが、それをベースにサービスを構築しました。うまくできなかったので、共有したかったのです。

まず使用されるものについて話しましょう。node はバックグラウンド サービスに使用され、express は 静的 リソースのホストに使用され、socket.io はチャット データの送信に使用されます。次に、アイデアについて話しましょう。実際、socket.io を使用してデータを送信するのは非常に簡単です。フロントエンド ページにsocket.io.jsを導入してから require('socket.io) を導入するだけです。 ') をノード側で実行すると、フロントエンドは次のコードを通じて情報を送受信できるようになります。


//前端
socket = io.connect('ws://'+'服务器ip');
socket.emit('msg',{msg:'前端要发送的信息'});//要发送的信息(以对象的形式发送)
socket.on('msg2',function(data){
  ...
  //这里的data是后端传过来的信息
})
//后端
socket.on('msg',function(data){
  var data = data; //这里的data就是前端传过来的数据,即{msg:'前端要发送的信息'}
  console.log(data.msg) // 打印出 “前端要发送的信息”
})
//同理,后端要传信息给前端也是一样
socket.emit('msg2',{msg:'后端要发送的信息'});
ログイン後にコピー

バックエンドがソケットをどのように実行するかを見てみましょう


 var express = require('express');
var app = express();
var http = require('http').Server(app);
var io = require('socket.io')(http);
io.on('connection', function(socket){ //当前端执行 socket = io.connect('ws://'+host); 的时候,此处的io会监听到connection事件
 socket.on('msg',function(data){ 
 io.emit('onlineCount',freeList)
 //如果直接用io.emit来发送数据的话,这代表广播的形式,就是当前所有打开服务的前端页面都会收到这条消息。
 
   socket.emit('welcome',{msg:'欢迎...'})//这里将给当前连接的页面发送一个欢迎的对象数据
 })
 socket.on('disconnect',function(){
 //当前端页面关闭,或者失去连接时,后端会接收到disconnect事件
   
 })

})
http.listen(4000, function(){
 console.log('listening on *:4000');
});
ログイン後にコピー

もちろんそれだけではありません。WebSocket プロトコルはブラウザとサーバーの間に長いリンクを確立して、相互にデータを送信し、たとえば、複数のページが開かれている場合、接続を確立する各フロントエンド ページにはソケット インスタンスがあり、その後のポイントツーポイントのプライベート チャットのアイデアが提供されます。もちろん、直接ブロードキャストで情報を送信することもできますが、これはチャット ルームのシナリオに適しています。

ピアツーピアを実装するにはどうすればよいですか? 前に述べたように、接続を確立する各ページはソケット インスタンスを生成します。その後、バックエンドはメッセージの受信中にソケット インスタンスがどのインスタンスとチャットしているかを判断するだけで済みます。 、メッセージを別の一致するソケット インスタンスに送信するだけです。簡単に言うと、メッセージをバックエンドに送信し、そのメッセージが xxx 宛てであることをバックエンドに伝え、バックエンドが xxx に対応するソケット インスタンスを見つけてメッセージを送信するようなものです。


//前端
window.id = new Date().getTime()+""+Math.floor(Math.random()*899+100);
//每次登录,获取一个唯一的用户id
socket = io.connect('ws://'+host);
socket.emit('newUser',{ user_name : name, user_id : id})
//建立连接后,将我的用户名和id都传给后端

//后端
socket.on('newUser',function(data){
 var nickname = data.user_name,
  user_id = data.user_id;
 userServer[user_id] = socket;
 //后端接收后,将该用户socket保存在一个对象里,key值为id,value就是这个用户的socket
  
})
ログイン後にコピー
上記のコードを通じて、バックエンドは各接続ソケットの対応する値とその ID を含む userServer オブジェクトを取得します。このようにして、情報が送信されるたびに、受信されるオブジェクトが添付されます。 .id を使用してポイントツーポイントのデータ伝送を実現します。


次のステップは、データ処理、相手のIDの取得方法などです。私の限られた表現能力と怠惰を考慮して、詳細には触れません~~ コードはgithubでホストされているので、自由にアクセスしてくださいチェックしてみてください

以上がチャット機能を実装するnode.js+socket.ioの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート