NodejsはSocket.IOを組み合わせてインスタントメッセージング機能を実現します-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

NodejsはSocket.IOを組み合わせてインスタントメッセージング機能を実現します

Jan 15, 2018 am 09:42 AM

javascript nodejs socket.io

この記事では、nodejs と Socket.IO を組み合わせて実装されるインスタントメッセージング機能を主に紹介し、nodejs と Socket.IO を組み合わせてインスタントメッセージングを実装するための関連する操作スキルと注意事項を、サンプルの形式で詳細に分析します。皆さんの参考になれば幸いです。

動的 Web

HTML5 が登場するまで、Web のデザインは常にドキュメントを中心に設計されていました。基本的には、単一のドキュメントを表示するために使用されていました。ユーザーは Web ページを一度リクエストしてページを取得しますが、時間が経つにつれて、人々は Web に単にドキュメントを表示するだけではなく、より多くの機能を提供することを望んでおり、開発者の間では常に JavaScript が Web ページの機能開発を推進してきました。

Ajax は、動的 Web ページにおける主要な進歩であることは間違いありません。少しのコンテンツを更新した場合でも、ページ全体を更新する必要はなくなりましたが、いくつかの側面では、Ajax の欠点が反映されています。サーバーにデータをリクエストする場合は問題ありませんが、サーバーがデータをブラウザーにプッシュしたい場合はどうすればよいでしょうか? Ajax テクノロジは、顧客へのデータのプッシュを簡単にはサポートできませんが、国境を越えた多くの障害が必要であり、たとえば、IE と FireBox では動作方法が異なるため、動作方法も異なります。

WebSocket は、サーバーとクライアント間の双方向通信の問題に対する応答です。このアイデアは、すべてのブラウザーで必ずしも機能するとは限らない複雑な設定を行うのではなく、開発者が一貫した方法でアプリケーションを作成するために使用できる標準をゼロから設計することでした。その考え方は、Web サーバーとブラウザーの間で永続的なオープン接続を維持し、サーバーとブラウザーの両方が必要なときにデータをプッシュできるようにすることです。接続は永続的であるため、データの交換は非常に高速でリアルタイムになります。

Socket.IO

ここまで述べたので、メインのスピーカーを紹介しましょう。Socket.IO は、WebSocket プロトコルを介して通信する簡単な方法を提供します。ただし、Socket.IO はサーバーとクライアントの両方にコンポーネントを提供するため、WebSocket のサポートをアプリケーションに追加するために必要なモジュールは 1 つだけです。さまざまなブラウザもサポートしています。

基本的な Socket.IO

Socket.IO を使用するには、サーバー側 JavaScript (Node.js) とクライアント側 JavaScript (JQuery) に追加する必要があります。これは、内部通信は通常双方向であるため、Sokcet.IO は両方の側で動作できる必要があるためです。

var server = http.createServer(function (req,res){
  fs.readFile(&#39;./index.html&#39;,function(error,data){
    res.writeHead(200,{&#39;Content-Type&#39;:&#39;text/html&#39;});
    res.end(data,&#39;utf-8&#39;);
  });
}).listen(3000,&quot;127.0.0.1&quot;);
console.log(&#39;Server running at http://127.0.0.1:3000/&#39;);

ログイン後にコピー

そして、Socket.IO 機能を追加するには、Socket.IO ライブラリを含める必要があります。

var io = require(&#39;socket.io&#39;).listen(server);

ログイン後にコピー

次に、クライアントが接続されているか切断されているかに応答するイベントを追加します。イベントは次のとおりです:

io.sockets.on(&#39;connection&#39;,function(socket){
  console.log(&#39;User connected&#39;);
  socket.on(&#39;disconnect&#39;,function(){
    console.log(&#39;User disconnected&#39;);
  });
});

ログイン後にコピー

非常に簡単だと思いませんか? 完全なコードの実装方法を見てみましょう:

Simple Socket.IO アプリケーション

New app.js

新しいフォルダーsocket.ioを作成し、このフォルダーの下に新しいapp.jsを作成し、次のコードを記述します:

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
  fs.readFile(&#39;./index.html&#39;,function(error,data){
    res.writeHead(200,{&#39;Content-Type&#39;:&#39;text/html&#39;});
    res.end(data,&#39;utf-8&#39;);
  });
}).listen(3000,&quot;127.0.0.1&quot;);
console.log(&#39;Server running at http://127.0.0.1:3000/&#39;);
var io = require(&#39;socket.io&#39;).listen(server);
io.sockets.on(&#39;connection&#39;,function(socket){
  console.log(&#39;User connected&#39;);
  socket.on(&#39;disconnect&#39;,function(){
    console.log(&#39;User disconnected&#39;);
  });
});

ログイン後にコピー

新しいindex.html

新しいindex.htmlを作成するファイルのコードは次のとおりです。

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;title&gt;Socket.IO Example&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Socket.IO Example&lt;/h1&gt;
  &lt;script src=&quot;/socket.io/socket.io.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
   var socket = io.connect(&#39;http://127.0.0.1:3000&#39;);
  &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

Create a new package.json

モジュールを導入するために新しい package.json を作成します。

{
  &quot;name&quot;:&quot;socketio_example&quot;,
  &quot;version&quot;:&quot;4.13.2&quot;,
  &quot;private&quot;:true,
  &quot;dependencies&quot;:{
    &quot;socket.io&quot;:&quot;1.4.5&quot;
  }
}

ログイン後にコピー

バージョン番号については、nodejs -V、またはsocket.io -vを入力してバージョン番号を確認できます。

実行

Socket.IO をインストールしていない場合は、次のコードを実行できます。インストールされている場合、この手順は自動的にスキップされます。

npm install socket.io

ログイン後にコピー

ターミナルから次のコマンドを実行してモジュールをインストールします

npm install

ログイン後にコピー

次のコマンドを実行してサーバーを起動します

node app.js

ログイン後にコピー

ブラウザを開き、 http://127.0.0.1 と入力します。 3000/、さらにいくつかのタブを開き、すべてのタブに URL を入力し、任意のタブを閉じて、cmd コマンドウィンドウが次のようになっているかどうかを確認します。

ここでは、使用されている接続数と接続数が詳細に記録されます。接続を切断したユーザーの数。Web ページへのアクセス数をカウントできるように接続を開きます。

サーバーからクライアントにデータを送信します

上記の例では、記録するためにサーバーとの接続または切断を実装しましたが、メッセージをプッシュしたい場合はどうなるでしょうか。たとえば、友人のQQはオンライン、テンセント彼らは皆、友人がオンラインであることを思い出させるために咳をします。この関数を見てみましょう。

単一のユーザーに送信

io.sockets.on(&#39;connection&#39;,function(socket){
    socket.emit(&#39;message&#39;,{text:&#39;你上线了&#39;});
});

ログイン後にコピー

すべてのユーザーに送信

io.sockets.on(&#39;connection&#39;,function(socket){
    socket.broadcast.emit(&#39;message&#39;,{&#39;你的好某XXX上线了&#39;});
});

ログイン後にコピー

単一のユーザーに送信されるか、すべてのユーザーに送信されるかに関係なく、このメッセージは私自身が書いていますが、必ずクライアントで使用されるため、名前に注意してください。

クライアント

在客户端我们可以添加侦听事件来接收数据。

var socket = io.connect(&#39;http://127.0.0.1:3000&#39;);
socket.on(&#39;message&#39;,function(data){
  alert(data.text);
})

ログイン後にコピー

通过这些功能，我们就在第一个例子的基础上，实现用户数量的统计。这里只需要在服务端设置一个变量，count,如果有一个上线，那么就数量+1，并通知所有用户，最新的在线人数。

新建app.js

var http = require('http');
var fs = require('fs');
var count = 0;
var server = http.createServer(function (req,res){
  fs.readFile(&#39;./index.html&#39;,function(error,data){
    res.writeHead(200,{&#39;Content-Type&#39;:&#39;text/html&#39;});
    res.end(data,&#39;utf-8&#39;);
  });
}).listen(3000,&quot;127.0.0.1&quot;);
console.log(&#39;Server running at http://127.0.0.1:3000/&#39;);
var io = require(&#39;socket.io&#39;).listen(server);
io.sockets.on('connection',function(socket){
  count++;
  console.log('User connected' + count + 'user(s) present');
  socket.emit('users',{number:count});
  socket.broadcast.emit('users',{number:count});
  socket.on('disconnect',function(){
    count--;
    console.log('User disconnected');
    socket.broadcast.emit('users',{number:count});
  });
});

ログイン後にコピー

创建index.html文件

&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;title&gt;Socket.IO Example&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Socket.IO Example&lt;/h1&gt;
  &lt;h2&gt;How many users are here?&lt;/h2&gt;
  &lt;p id=&quot;count&quot;&gt;&lt;/p&gt;
   &lt;script src=&quot;http://***.***.**.***:9001/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/socket.io/socket.io.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
   var socket = io.connect(&#39;http://127.0.0.1:3000&#39;);
   var count = document.getElementById(&#39;count&#39;);
   socket.on(&#39;users&#39;,function(data){
    console.log(&#39;Got update from the server&#39;);
    console.log(&#39;There are &#39; + data.number + &#39;users&#39;);
    count.innerHTML = data.number
   });
  &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

创建package.json文件

{
  &quot;name&quot;:&quot;socketio_example&quot;,
  &quot;version&quot;:&quot;4.13.2&quot;,
  &quot;private&quot;:true,
  &quot;dependencies&quot;:{
    &quot;socket.io&quot;:&quot;1.4.5&quot;
  }
}

ログイン後にコピー

安装模块npm install

启动服务器node app.js

打开浏览器，输入http://127.0.0.1:3000,可以看到如下图片：

再打开一个连接http://127.0.0.1:3000，可以看到如下结果：

可以看到如果我们打开两个连接，那么两个页签都会显示当前又两个用户在线，如果关闭其中一个，我们可以看到又显示只有一个用户在线。

将数据广播给客户端

接下来我们来看看Socket.IO是如何实现客户端与客户端的通信呢。
要想实现该功能，首先需要客户端将消息发送到服务端，·然后服务端发送给除自己之外的其他客户。服务器将消息发送给客户端的方法在上一个例子中我们已经实现了，那么我们需要的是客户端把接收到的消息发送给服务器。

下边的代码思想是利用表单来实现的。

&lt;form id=&quot;message-form&quot; action=&quot;#&quot;&gt;
   &lt;textarea id=&quot;message&quot; rows=&quot;4&quot; cols=&quot;30&quot;&gt;&lt;/textarea&gt;
   &lt;input type=&quot;submit&quot; value=&quot;Send message&quot; /&gt;
&lt;/form&gt;
&lt;script src=&quot;http://***.***.***.**:9001/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;/socket.io/socket.io.js&quot;&gt;&lt;/script&gt;
&lt;script&gt;
   var socket = io.connect(&#39;http://127.0.0.1:3000&#39;);
   var message = document.getElementById(&#39;message&#39;);
   $(message.form).submit(function() {
    socket.emit(&#39;message&#39;, { text: message.value });
    return false;
   });
   socket.on(&#39;push message&#39;, function (data) {
    $(&#39;form&#39;).after(&#39;&lt;p&gt;&#39; + data.text + &#39;&lt;/p&gt;&#39;);
   });
&lt;/script&gt;

ログイン後にコピー

实现的思想是,将JQuery和SocketIO库包含进来，只是浏览器拦截127.0.0.1:3000的服务，使用Jquery的submit方法加入侦听期，等候用户提交表单。

发送消息给Socket>IO服务器，文本区域的内容位消息发送。

添加return false ，防止表单在浏览器窗口提交。

在上边已经说过服务器如何广播消息，下边我们说一下客户端如何显示客户端发送的消息。

socket.on(&#39;push message&#39;, function (data) {
  $(&#39;form&#39;).after(&#39;&lt;p&gt;&#39; + data.text + &#39;&lt;/p&gt;&#39;);
})

ログイン後にコピー

实例实现

创建messaging的新文件夹

在文件夹下创建package.json文件，代码如下：

{
  &quot;name&quot;:&quot;socketio_example&quot;,
  &quot;version&quot;:&quot;4.13.2&quot;,
  &quot;private&quot;:true,
  &quot;dependencies&quot;:{
    &quot;socket.io&quot;:&quot;1.4.5&quot;
  }
}

ログイン後にコピー

创建app.js文件，代码如下：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req,res){
  fs.readFile(&#39;./index.html&#39;,function(error,data){
    res.writeHead(200,{&#39;Content-Type&#39;:&#39;text/html&#39;});
    res.end(data,&#39;utf-8&#39;);
  });
}).listen(3000,&quot;127.0.0.1&quot;);
console.log(&#39;Server running at http://127.0.0.1:3000/&#39;);
var io = require(&#39;socket.io&#39;).listen(server);
io.sockets.on('connection',function(socket){
  socket.on('message',function(data){
    socket.broadcast.emit('push message',data);
  });
});

ログイン後にコピー

创建index.html

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot; /&gt;
  &lt;title&gt;Socket.IO Example&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Socket.IO Example&lt;/h1&gt;
  &lt;form id=&quot;message-form&quot; action=&quot;#&quot;&gt;
   &lt;textarea id=&quot;message&quot; rows=&quot;4&quot; cols=&quot;30&quot;&gt;&lt;/textarea&gt;
   &lt;input type=&quot;submit&quot; value=&quot;Send message&quot; /&gt;
  &lt;/form&gt;
  &lt;script src=&quot;http://222.222.124.77:9001/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script src=&quot;/socket.io/socket.io.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
   var socket = io.connect(&#39;http://127.0.0.1:3000&#39;);
   var message = document.getElementById(&#39;message&#39;);
   $(message.form).submit(function() {
    socket.emit(&#39;message&#39;, { text: message.value });
    return false;
   });
   socket.on(&#39;push message&#39;, function (data) {
    $(&#39;form&#39;).after(&#39;&lt;p&gt;&#39; + data.text + &#39;&lt;/p&gt;&#39;);
   });
  &lt;/script&gt;
 &lt;/body&gt;
&lt;/html&gt;

ログイン後にコピー

加载模块npm install

启动服务器node app.js

然后打开浏览器的多个页签，都输入http://127.0.0.1:3000

可以看到我们再任何一个窗口输入内容，都会在其他的页面显示我们输入的内容，效果如下：

小结

这篇博客好长，其实说了这么多，还是有很多的东西没有说，但是我们还是讨论了Socket.IO如何实现动态的，通过服务端能显示用户的连接，和统计链接次数统计，到最后的消息的通知和聊天功能的实现。在我们的生活中这种例子比比解释，例如QQ，例如淘宝的抢购，都是可以通过这种方式实现的，这样我们就能实时的实现动态的功能了。