帝世天 發表於 2020-12-12 16:17:00

Node.js--WebSocket使用示例

<div><span style="font-size: 18px"><strong><span style="font-family: verdana, geneva">一、基本使用</span></strong></span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">1.安装node</span></strong></span></div>
<div><span style="font-family: verdana, geneva">https://nodejs.org/en/&nbsp;&nbsp;</span></div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">2.安装ws模块</span></strong></span></div>
<div><span style="font-family: verdana, geneva">ws：是nodejs的一个WebSocket库，可以用来创建服务。&nbsp;https://github.com/websockets/ws</span></div>
<div><span style="font-family: verdana, geneva">npm install ws</span></div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">3.创建服务端</span></strong></span></div>
<div><span style="font-family: verdana, geneva">在项目里面新建一个server.js，创建服务，指定8181端口，将收到的消息log出来。</span></div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> WebSocketServer = require('ws'<span style="color: rgba(0, 0, 0, 1)">).Server,
wss </span>= <span style="color: rgba(0, 0, 255, 1)">new</span> WebSocketServer({ port: 8181<span style="color: rgba(0, 0, 0, 1)"> });
wss.on(</span>'connection', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (ws) {
    console.log(</span>'client connected'<span style="color: rgba(0, 0, 0, 1)">);
    ws.on(</span>'message', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (message) {
      console.log(message);
    });
});</span></pre>
</div>
</div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">4.创建客户端</span></strong></span></div>
<div><span style="font-family: verdana, geneva">在页面上建立一个WebSocket的连接。用send方法发送消息。</span></div>
<div>
<div class="cnblogs_code">
<pre> <span style="color: rgba(0, 0, 255, 1)">var</span> ws = <span style="color: rgba(0, 0, 255, 1)">new</span> WebSocket("ws://localhost:8181"<span style="color: rgba(0, 0, 0, 1)">);
    ws.onopen </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (e) {
      console.log(</span>'Connection to server opened'<span style="color: rgba(0, 0, 0, 1)">);
    }
    </span><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> sendMessage() {
      ws.send($(</span>'#message'<span style="color: rgba(0, 0, 0, 1)">).val());
    }</span></pre>
</div>
</div>
<div><span style="font-family: verdana, geneva">运行之后如下，服务端即时获得客户端的消息。</span></div>
<div><span style="font-family: verdana, geneva"><img src="https://img2020.cnblogs.com/blog/1138955/202012/1138955-20201212161138400-427014668.png"></span></div>
<div><span style="font-family: verdana, geneva">上面的例子很简单，只是为了演示如何运用nodejs的ws创建一个WebSocket服务器。且可以接受客户端的消息。</span></div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-size: 18px"><strong><span style="font-family: verdana, geneva">二、示例--股票刷新</span></strong></span></div>
<div><span style="font-family: verdana, geneva">下面这个例子演示股票的实时更新。客服端只需要连接一次，服务器端会不断地发送新数据，客户端收数据后更新UI.页面如下，有五只股票，开始和停止按钮测试连接和关闭。</span></div>
<div><span style="font-family: verdana, geneva"><img src="https://img2020.cnblogs.com/blog/1138955/202012/1138955-20201212161412906-450254824.gif"></span></div>
<div>&nbsp;</div>
<div><span style="font-size: 18px"><strong><span style="font-family: verdana, geneva">二、示例--聊天室</span></strong></span></div>
<div><span style="font-family: verdana, geneva">上面的例子是连接建立之后，服务端不断给客户端发送数据。接下来例子是一个简单的聊天室类的例子。可以建立多个连接。</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">1.安装node-uuid模块，用来给每个连接一个唯一号。</span></strong></span></div>
<div><span style="font-family: verdana, geneva">npm install node-uuid</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">&nbsp;</span></strong></span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">2.服务端消息发送</span></strong></span></div>
<div><span style="font-family: verdana, geneva">消息类型分notification和message两种，前者是提示信息，后者是聊天内容。消息还包含一个id、昵称和消息内容。</span></div>
<div><span style="font-family: verdana, geneva">我们好知道readyState有四个值，OPEN表示连接建立可以发送消息。如果页面关闭了，为WebSocket.CLOSE。</span></div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> wsSend(type, client_uuid, nickname, message) {
    </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0; i &lt; clients.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
      </span><span style="color: rgba(0, 0, 255, 1)">var</span> clientSocket =<span style="color: rgba(0, 0, 0, 1)"> clients.ws;
      </span><span style="color: rgba(0, 0, 255, 1)">if</span> (clientSocket.readyState ===<span style="color: rgba(0, 0, 0, 1)"> WebSocket.OPEN) {
            clientSocket.send(JSON.stringify({
                </span>"type"<span style="color: rgba(0, 0, 0, 1)">: type,
                </span>"id"<span style="color: rgba(0, 0, 0, 1)">: client_uuid,
                </span>"nickname"<span style="color: rgba(0, 0, 0, 1)">: nickname,
                </span>"message"<span style="color: rgba(0, 0, 0, 1)">: message
            }));
      }
    }
}</span></pre>
</div>
</div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">3.服务端处理连接</span></strong></span></div>
<div><span style="font-family: verdana, geneva">每新增加一个连接，都会发送一条匿名用户的加入的提示消息，如果消息中带有“/nick” 认为这一个修改昵称的消息。然后更新客户端的昵称。其他都会当做聊天消息处理。</span></div>
<div>
<div class="cnblogs_code">
<pre>wss.on('connection', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(ws) {
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> client_uuid =<span style="color: rgba(0, 0, 0, 1)"> uuid.v4();
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> nickname = "AnonymousUser" +<span style="color: rgba(0, 0, 0, 1)"> clientIndex;
    clientIndex </span>+= 1<span style="color: rgba(0, 0, 0, 1)">;
    clients.push({ </span>"id": client_uuid, "ws": ws, "nickname"<span style="color: rgba(0, 0, 0, 1)">: nickname });
    console.log(</span>'client [%s] connected'<span style="color: rgba(0, 0, 0, 1)">, client_uuid);
    </span><span style="color: rgba(0, 0, 255, 1)">var</span> connect_message = nickname + " has connected"<span style="color: rgba(0, 0, 0, 1)">;
    wsSend(</span>"notification"<span style="color: rgba(0, 0, 0, 1)">, client_uuid, nickname, connect_message);
    console.log(</span>'client [%s] connected'<span style="color: rgba(0, 0, 0, 1)">, client_uuid);
    ws.on(</span>'message', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(message) {
      </span><span style="color: rgba(0, 0, 255, 1)">if</span> (message.indexOf('/nick') === 0<span style="color: rgba(0, 0, 0, 1)">) {
            </span><span style="color: rgba(0, 0, 255, 1)">var</span> nickname_array = message.split(' '<span style="color: rgba(0, 0, 0, 1)">);
            </span><span style="color: rgba(0, 0, 255, 1)">if</span> (nickname_array.length &gt;= 2<span style="color: rgba(0, 0, 0, 1)">) {
                </span><span style="color: rgba(0, 0, 255, 1)">var</span> old_nickname =<span style="color: rgba(0, 0, 0, 1)"> nickname;
                nickname </span>= nickname_array;
                </span><span style="color: rgba(0, 0, 255, 1)">var</span> nickname_message = "Client " + old_nickname + " changed to " +<span style="color: rgba(0, 0, 0, 1)"> nickname;
                wsSend(</span>"nick_update"<span style="color: rgba(0, 0, 0, 1)">, client_uuid, nickname, nickname_message);
            }
      } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
            wsSend(</span>"message"<span style="color: rgba(0, 0, 0, 1)">, client_uuid, nickname, message);
      }
    });</span></pre>
</div>
</div>
<div><span style="font-family: verdana, geneva">处理连接关闭：</span></div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">var</span> closeSocket = <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)">(customMessage) {
      </span><span style="color: rgba(0, 0, 255, 1)">for</span> (<span style="color: rgba(0, 0, 255, 1)">var</span> i = 0; i &lt; clients.length; i++<span style="color: rgba(0, 0, 0, 1)">) {
            </span><span style="color: rgba(0, 0, 255, 1)">if</span> (clients.id ==<span style="color: rgba(0, 0, 0, 1)"> client_uuid) {
                </span><span style="color: rgba(0, 0, 255, 1)">var</span><span style="color: rgba(0, 0, 0, 1)"> disconnect_message;
                </span><span style="color: rgba(0, 0, 255, 1)">if</span><span style="color: rgba(0, 0, 0, 1)"> (customMessage) {
                  disconnect_message </span>=<span style="color: rgba(0, 0, 0, 1)"> customMessage;
                } </span><span style="color: rgba(0, 0, 255, 1)">else</span><span style="color: rgba(0, 0, 0, 1)"> {
                  disconnect_message </span>= nickname + " has disconnected"<span style="color: rgba(0, 0, 0, 1)">;
                }
                wsSend(</span>"notification"<span style="color: rgba(0, 0, 0, 1)">, client_uuid, nickname, disconnect_message);
                clients.splice(i, </span>1<span style="color: rgba(0, 0, 0, 1)">);
            }
      }
    };
    ws.on(</span>'close', <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
      closeSocket();
    });</span></pre>
</div>
</div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-size: 16px"><strong><span style="font-family: verdana, geneva">4.客户端</span></strong></span></div>
<div><span style="font-family: verdana, geneva"><img src="https://img2020.cnblogs.com/blog/1138955/202012/1138955-20201212161656042-1113923263.gif"></span></div>
<div><span style="font-family: verdana, geneva">&nbsp;页面关闭之后，连接马上断开。</span></div>
<div><span style="font-family: verdana, geneva"><img alt="" data-media-type="image" data-attr-org-src-id="C8B5762903F942D7B0037A203840CD79"></span></div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<div><span style="font-family: verdana, geneva">&nbsp;API：WebSocket API</span></div>
<div><span style="font-family: verdana, geneva">&nbsp;</span></div>
<p><span style="font-family: verdana, geneva"></span></p><br><br>
来源：https://www.cnblogs.com/absoluteli/p/14125083.html
頁: [1]
查看完整版本: Node.js--WebSocket使用示例