Choses à propos de WebSocket

Comme nous le savons tous, le protocole http traditionnel est la manière dont le client (navigateur) envoie une requête et le navigateur répond à la requête. Une requête correspond à une réponse. Si le navigateur ne demande pas activement, le serveur ne peut pas transmettre activement les données au client. La méthode traditionnelle consiste à utiliser l'interrogation AJAX (cette méthode a ses problèmes) pour résoudre ce problème, qui sera abordé plus tard.

Scénarios d'application

Listez plusieurs scénarios d'application :

• Salle de discussion sur Internet

• Jeu multijoueur en ligne

• Site Web à page en temps réel Publicités et messages push

• Contrôlez le dispositif de contrôle en ligne

Les trois premiers De nombreux experts J'ai déjà parlé des scénarios d'application, je n'entrerai donc pas dans les détails. Ici, j'analyserai brièvement le quatrième scénario d'application.

Scénario 4 :

Il y a une caméra réseau de marque "XX" chez moi. Je travaille maintenant et je veux voir si mon ". Erha" Lors du démontage de la maison, j'ai ouvert l'application fournie par l'entreprise pour vérifier la situation à la maison. Malheureusement, la caméra n'est pas allumée pour le moment. Cependant, vous pouvez contrôler l'allumage de la caméra via l'application et cliquer sur le bouton bouton d'alimentation pour allumer l'appareil photo. Mais la caméra met un certain temps à s'allumer. À l'heure actuelle, l'approche traditionnelle consiste à envoyer une requête au serveur toutes les secondes environ via une interrogation AJAX pour demander si l'appareil est prêt.

Client> L'ordinateur n'est pas allumé. Puis-je lire la vidéo ?

Serveur> Pas encore, ne vous inquiétez pas, revenez plus tard.

Client> L'ordinateur n'est pas allumé. Puis-je lire la vidéo ?

Serveur> Pas encore, ne vous inquiétez pas, revenez plus tard.

Client> L'ordinateur n'est pas allumé. Puis-je lire la vidéo ?

Serveur> Pas encore, ne vous inquiétez pas, revenez plus tard.

......

Après N fois

.... .

Client> L'ordinateur n'est pas allumé. Puis-je lire la vidéo ? . .

Serveur> D'accord, vous pouvez jouer

Cela montre que le client doit répondre à de nombreuses demandes uniquement de cette manière. peut-on savoir quand le serveur est prêt ? S'il y a trop de clients qui envoient des requêtes et que la fréquence des requêtes est particulièrement élevée, cela mettra sans aucun doute beaucoup de pression sur le serveur.

S'il existe un moyen pour le serveur de transmettre des messages au client, cette situation peut être parfaitement résolue, c'est pourquoi WebSocket est apparu.

Utilisation de WebSocket

WebSocket est un nouveau protocole HTML5, donc les navigateurs prenant en charge HTML5 peuvent utiliser directement WebSocket sans installation supplémentaire. package ou plug-in?

Afin de tester WebSocket, nous devons simplement créer un programme serveur. Les protocoles pris en charge par Node.js incluent le protocole TCP et le protocole HTTP, mais il ne prend pas en charge WebSocket. Pour que Node prenne également en charge WebSocket, je choisis ici le module ws.

Test

Créez un dossier nommé testWebSocket et utilisez npm init pour initialiser le projet

Fichier package.json de configuration ajouté, sélectionnez ici la dernière version de ws

<span style="padding-right: 0.1px"><span class="cm-string" style="color: #aa1111">"dependencies"</span>: {</span><br/><span style="padding-right: 0.1px"><span class="cm-string cm-property">　　"ws"</span>: <span class="cm-string" style="color: #aa1111">"^6.2.1"</span></span><br/><span style="padding-right: 0.1px">}</span>

Utilisez la commande npm npm install --save dans le répertoire racine pour extraire toutes les dépendances associées ws.

Créez ensuite un fichier nommé myWebSocketServer.js, un simple programme serveur WebSocket est terminé,

node myWebSocketServer.js Laissez le serveur s'exécuter en premier. Tutoriels associés : Tutoriel vidéo webSocket

<span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">// 导入WebSocket模块:</span></span><br/><span style="padding-right: 0.1px"><span class="cm-keyword" style="color: #770088">const</span> <span class="cm-def" style="color: #0000ff">WebSocket</span> <span class="cm-operator" style="color: #981a1a">=</span> <span class="cm-variable" style="color: #000000">require</span>(<span class="cm-string" style="color: #aa1111">&#39;ws&#39;</span>);</span><br/><span style="padding-right: 0.1px"><span class="cm-keyword" style="color: #770088">let</span> <span class="cm-def" style="color: #0000ff">i</span> <span class="cm-operator" style="color: #981a1a">=</span> <span class="cm-number" style="color: #116644">1</span>;</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">// 引用Server类:</span></span><br/><span style="padding-right: 0.1px"><span class="cm-keyword" style="color: #770088">const</span> <span class="cm-def" style="color: #0000ff">WebSocketServer</span> <span class="cm-operator" style="color: #981a1a">=</span> <span class="cm-variable" style="color: #000000">WebSocket</span>.<span class="cm-property" style="color: #000000">Server</span>;</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">// 实例化:</span></span><br/><span style="padding-right: 0.1px"><span class="cm-keyword" style="color: #770088">const</span> <span class="cm-def" style="color: #0000ff">myWs</span> <span class="cm-operator" style="color: #981a1a">=</span> <span class="cm-keyword" style="color: #770088">new</span> <span class="cm-variable" style="color: #000000">WebSocketServer</span>({</span><br/><span style="padding-right: 0.1px">    <span class="cm-property" style="color: #000000">port</span>: <span class="cm-number" style="color: #116644">8080</span></span><br/><span style="padding-right: 0.1px">});</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">myWs</span>.<span class="cm-property" style="color: #000000">on</span>(<span class="cm-string" style="color: #aa1111">&#39;connection&#39;</span>, <span class="cm-def" style="color: #0000ff">ws</span> <span class="cm-operator" style="color: #981a1a">=></span> {</span><br/><span style="padding-right: 0.1px">    <span class="cm-variable-2" style="color: #0055aa">ws</span>.<span class="cm-property" style="color: #000000">on</span>(<span class="cm-string" style="color: #aa1111">&#39;message&#39;</span>, <span class="cm-def" style="color: #0000ff">message</span> <span class="cm-operator" style="color: #981a1a">=></span> {</span><br/><span style="padding-right: 0.1px">        <span class="cm-variable" style="color: #000000">console</span>.<span class="cm-property" style="color: #000000">log</span>(<span class="cm-string" style="color: #aa1111">&#39;received: %s&#39;</span>, <span class="cm-variable-2" style="color: #0055aa">message</span>);</span><br/><span style="padding-right: 0.1px">    });</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px">    <span class="cm-variable" style="color: #000000">setInterval</span>(() <span class="cm-operator" style="color: #981a1a">=></span> {</span><br/><span style="padding-right: 0.1px">        <span class="cm-variable-2" style="color: #0055aa">ws</span>.<span class="cm-property" style="color: #000000">send</span>(<span class="cm-string" style="color: #aa1111">&#39;Hello siegaii this is serverMessage!&#39;</span> <span class="cm-operator" style="color: #981a1a">+</span> <span class="cm-variable" style="color: #000000">i</span>);</span><br/><span style="padding-right: 0.1px">        <span class="cm-variable" style="color: #000000">i</span><span class="cm-operator" style="color: #981a1a">++</span>;</span><br/><span style="padding-right: 0.1px">    }, <span class="cm-number" style="color: #116644">1000</span>);</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px">});</span>

Client

<span style="padding-right: 0.1px"><span class="cm-meta" style="color: #555555"><!DOCTYPE html></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">html</span> <span class="cm-attribute" style="color: #0000cc">lang</span>=<span class="cm-string" style="color: #aa1111">"en"</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">head</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">meta</span> <span class="cm-attribute" style="color: #0000cc">charset</span>=<span class="cm-string" style="color: #aa1111">"UTF-8"</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px">    <span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">title</span><span class="cm-tag cm-bracket" style="color: #117700">></span>test<span class="cm-tag cm-bracket" style="color: #117700"></</span><span class="cm-tag" style="color: #117700">title</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"></</span><span class="cm-tag" style="color: #117700">head</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">body</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">button</span> <span class="cm-attribute" style="color: #0000cc">id</span>=<span class="cm-string" style="color: #aa1111">"test"</span><span class="cm-tag cm-bracket" style="color: #117700">></span>hello siegaii<span class="cm-tag cm-bracket" style="color: #117700"></</span><span class="cm-tag" style="color: #117700">button</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"><</span><span class="cm-tag" style="color: #117700">script</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px">    <span class="cm-keyword" style="color: #770088">let</span> <span class="cm-def" style="color: #0000ff">ws</span> <span class="cm-operator" style="color: #981a1a">=</span> <span class="cm-keyword" style="color: #770088">new</span> <span class="cm-variable" style="color: #000000">WebSocket</span>(<span class="cm-string" style="color: #aa1111">&#39;ws://localhost:8080/testWebSocket&#39;</span>);</span><br/><span style="padding-right: 0.1px">    <span class="cm-variable" style="color: #000000">document</span>.<span class="cm-property" style="color: #000000">getElementById</span>(<span class="cm-string" style="color: #aa1111">&#39;test&#39;</span>).<span class="cm-property" style="color: #000000">addEventListener</span>(<span class="cm-string" style="color: #aa1111">&#39;click&#39;</span>, () <span class="cm-operator" style="color: #981a1a">=></span> {</span><br/><span style="padding-right: 0.1px">        <span class="cm-variable" style="color: #000000">ws</span>.<span class="cm-property" style="color: #000000">send</span>(<span class="cm-string" style="color: #aa1111">&#39;Hello Siegaii this is clientMessage!&#39;</span>);</span><br/><span style="padding-right: 0.1px">    });</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px">    <span class="cm-comment" style="color: #aa5500">// 响应onmessage事件:</span></span><br/><span style="padding-right: 0.1px">    <span class="cm-variable" style="color: #000000">ws</span>.<span class="cm-property" style="color: #000000">onmessage</span> <span class="cm-operator" style="color: #981a1a">=</span> (<span class="cm-def" style="color: #0000ff">msg</span>) <span class="cm-operator" style="color: #981a1a">=></span> {</span><br/><span style="padding-right: 0.1px">        <span class="cm-variable" style="color: #000000">console</span>.<span class="cm-property" style="color: #000000">log</span>(<span class="cm-variable-2" style="color: #0055aa">msg</span>);</span><br/><span style="padding-right: 0.1px">    };</span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"></</span><span class="cm-tag" style="color: #117700">script</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"></</span><span class="cm-tag" style="color: #117700">body</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span><br/><span style="padding-right: 0.1px"><span class="cm-tag cm-bracket" style="color: #117700"></</span><span class="cm-tag" style="color: #117700">html</span><span class="cm-tag cm-bracket" style="color: #117700">></span></span>

Les résultats en cours d'exécution sont les suivants suit

API

简单介绍下WebSocket的api

<span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">// WebSocket Api</span></span><br/><span style="padding-right: 0.1px"><span class="cm-keyword" style="color: #770088">let</span> <span class="cm-def" style="color: #0000ff">socket</span> <span class="cm-operator" style="color: #981a1a">=</span> <span class="cm-keyword" style="color: #770088">new</span> <span class="cm-variable" style="color: #000000">WebSocket</span>(<span class="cm-variable" style="color: #000000">url</span>, [<span class="cm-variable" style="color: #000000">protocol</span>] ); <span class="cm-comment" style="color: #aa5500">// 实例化一个WebSocket对象建立连接</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">/**</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* socket的readyState属性</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* 0 - 表示连接尚未建立。</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* 1 - 表示连接已建立，可以进行通信。</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* 2 - 表示连接正在进行关闭。</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* 3 - 表示连接已经关闭或者连接不能打开。</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">*/</span></span><br/><span class="cm-tab-wrap-hack" style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">socket</span>.<span class="cm-property" style="color: #000000">readyState</span></span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">/**</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* 只读属性 bufferedAmount 已被 send() 放入正在队列中等待传输，但是还没有发出的 UTF-8 文本字节数。</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">*/</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">socket</span>.<span class="cm-property" style="color: #000000">bufferedAmount</span></span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">/**</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* WebSocket 事件</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">*/</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">socket</span>.<span class="cm-property" style="color: #000000">onopen</span>(); <span class="cm-comment" style="color: #aa5500">//连接建立时触发</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">socket</span>.<span class="cm-property" style="color: #000000">onmessage</span>(); <span class="cm-comment" style="color: #aa5500">//客户端接收服务端数据时触发</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">socket</span>.<span class="cm-property" style="color: #000000">onerror</span>(); <span class="cm-comment" style="color: #aa5500">//通信发生错误时触发</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">socket</span>.<span class="cm-property" style="color: #000000">onclose</span>(); <span class="cm-comment" style="color: #aa5500">//连接关闭时触发</span></span><br/><span style="padding-right: 0.1px"></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">/**</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">* WebSocket 方法</span></span><br/><span style="padding-right: 0.1px"><span class="cm-comment" style="color: #aa5500">*/</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">Socket</span>.<span class="cm-property" style="color: #000000">send</span>() <span class="cm-comment" style="color: #aa5500">//使用连接发送数据</span></span><br/><span style="padding-right: 0.1px"><span class="cm-variable" style="color: #000000">Socket</span>.<span class="cm-property" style="color: #000000">close</span>() <span class="cm-comment" style="color: #aa5500">//关闭连接</span></span><br/><span style="padding-right: 0.1px"><br/></span>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!