Node.js实现WebSocket聊天室的例子
发布时间：2022-03-19 编辑：jiaochengji.com
教程集为您提供Node.js实现WebSocket聊天室的例子等资源，欢迎您收藏本站，我们将为您提供最新的Node.js实现WebSocket聊天室的例子资源
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;"><path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"/></svg>
对于聊天室，大家应该都不陌生，笔者也写过很多关于聊天室的例子。
本节，我们将演示如何通过Node.js来实现一个WebSocket聊天服务器的例子。
<h2>使用ws创建WebSokcet服务器</h2>Node.js原生API并未提供WebSocket的支持，因此，需要安装第三方包才能使用WebSocket功能。对于WebSocket的支持，在开源社区有非常多的选择，本例子采用的是“ws”框架（项目主页为https://github.com/websockets/ws）。
“ws”顾名思义是一个用于支持WebSocket客户端和服务器的框架。它易于使用，功能强大，且不依赖于其他环境。
想其他Node.js应用一样，使用ws的首选方式是使用npm来管理。以下命令行用于安装ws在应用里面：
<pre><code>npm install ws </code></pre>具备了ws包之后，就可以创建WebSocket服务器了。以下是创建服务器的j简单示例：
<pre><code class="lang-js hljs"><span class="token keyword">const</span> WebSocket <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ws'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> server <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket<span class="token punctuation">.</span>Server</span><span class="token punctuation">(</span><span class="token punctuation">{</span> port<span class="token punctuation">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre>上述例子服务器启动在8080端口。
<h2>聊天服务器的需求</h2>聊天服务器的业务需求比较简单，是一个群聊聊天室。换言之，所有人发送的消息大家都可以见到。
当有新用户连接到服务器时，会以该用户的“IP 端口”作为用户的名称。
<h2>服务器的实现</h2>根据前面知识的学习，实现一个聊天服务器比较简单，完整代码如下：
<pre><code class="lang-js hljs"><span class="token keyword">const</span> WebSocket <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'ws'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">const</span> server <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket<span class="token punctuation">.</span>Server</span><span class="token punctuation">(</span><span class="token punctuation">{</span> port<span class="token punctuation">:</span> <span class="token number">8080</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'open'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'connected'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'close'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'disconnected'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> server<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'connection'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">connection</span><span class="token punctuation">(</span>ws<span class="token punctuation">,</span> req<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> ip <span class="token operator">=</span> req<span class="token punctuation">.</span>connection<span class="token punctuation">.</span>remoteAddress<span class="token punctuation">;</span> <span class="token keyword">const</span> port <span class="token operator">=</span> req<span class="token punctuation">.</span>connection<span class="token punctuation">.</span>remotePort<span class="token punctuation">;</span> <span class="token keyword">const</span> clientName <span class="token operator">=</span> ip <span class="token operator"> </span> port<span class="token punctuation">;</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'%s is connected'</span><span class="token punctuation">,</span> clientName<span class="token punctuation">)</span> <span class="token comment">// 发送欢迎信息给客户端</span> ws<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token string">"Welcome "</span> <span class="token operator"> </span> clientName<span class="token punctuation">)</span><span class="token punctuation">;</span> ws<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'message'</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">incoming</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'received: %s from %s'</span><span class="token punctuation">,</span> message<span class="token punctuation">,</span> clientName<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 广播消息给所有客户端</span> server<span class="token punctuation">.</span>clients<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token function">each</span><span class="token punctuation">(</span>client<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>client<span class="token punctuation">.</span>readyState <span class="token operator">===</span> WebSocket<span class="token punctuation">.</span><span class="token constant">OPEN</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> client<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span> clientName <span class="token operator"> </span> <span class="token string">" -> "</span> <span class="token operator"> </span> message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre>当客户端给服务器发送消息时，服务器会将该客户端的消息转发给所有客户端。
<h2>客户端的实现</h2>客户端是通HTML JavaScript的方式实现的。由于浏览器原生提供了WebSocket的API，所以并不需要ws框架的支持。
客户端client.html文件代码如下：
<pre><code class="lang-html hljs"><span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>UTF-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>title</span><span class="token punctuation">></span></span>WebSocket Chat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>title</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">var</span> socket<span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>window<span class="token punctuation">.</span>WebSocket<span class="token punctuation">)</span> <span class="token punctuation">{</span> window<span class="token punctuation">.</span>WebSocket <span class="token operator">=</span> window<span class="token punctuation">.</span>MozWebSocket<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>window<span class="token punctuation">.</span>WebSocket<span class="token punctuation">)</span> <span class="token punctuation">{</span> socket <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WebSocket</span><span class="token punctuation">(</span><span class="token string">"ws://localhost:8080/ws"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function-variable function">onmessage</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> ta <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'responseText'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ta<span class="token punctuation">.</span>value <span class="token operator">=</span> ta<span class="token punctuation">.</span>value <span class="token operator"> </span> <span class="token string">'\n'</span> <span class="token operator"> </span> event<span class="token punctuation">.</span>data <span class="token punctuation">}</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function-variable function">onopen</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> ta <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'responseText'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ta<span class="token punctuation">.</span>value <span class="token operator">=</span> <span class="token string">"连接开启!"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> socket<span class="token punctuation">.</span><span class="token function-variable function">onclose</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>event<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> ta <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'responseText'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> ta<span class="token punctuation">.</span>value <span class="token operator">=</span> ta<span class="token punctuation">.</span>value <span class="token operator"> </span> <span class="token string">"连接被关闭"</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"你的浏览器不支持 WebSocket！"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">function</span> <span class="token function">send</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>window<span class="token punctuation">.</span>WebSocket<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>socket<span class="token punctuation">.</span>readyState <span class="token operator">==</span> WebSocket<span class="token punctuation">.</span><span class="token constant">OPEN</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> socket<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>message<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">"连接没有开启."</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>form</span> <span class="token attr-name">onsubmit</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>return false;<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h3</span><span class="token punctuation">></span></span>WebSocket 聊天室：<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h3</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>textarea</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>responseText<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>textarea</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text<span class="token punctuation">"</span></span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>message<span class="token punctuation">"</span></span><span class="token style-attr language-css"><span class="token attr-name"> <span class="token attr-name">style</span></span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 300px</span><span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Welcome to waylau.com<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>发送消息<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>send(this.form.message.value)<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span> <span class="token attr-name">onclick</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>javascript:document.getElementById(<span class="token punctuation">'</span>responseText<span class="token punctuation">'</span>).value=<span class="token punctuation">'</span><span class="token punctuation">'</span><span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>清空聊天记录<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>form</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://waylau.com/<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>更多例子请访问 waylau.com<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>html</span><span class="token punctuation">></span></span> </code></pre> <h2>运行应用</h2>首先启动服务器。执行下面的命令：
<pre><code>node index.js </code></pre>接着用浏览器直接打开client.html文件，可以看到如下的聊天界面。
打开多个聊天窗口，就能模拟多个用户之间的群聊了。
本节例子可以在https://github.com/waylau/nodejs-book-samples的“ws-demo”应用中找到。
本节例子可以在“ws-demo”应用中找到。
<h2>参考引用</h2> <ul><li>本文同步至: https://waylau.com/node.js-websocket-chat/</li><li>MINA 实现聊天功能: https://waylau.com/mina-chat/</li><li>Netty 实现 WebSocket 聊天功能: https://waylau.com/netty-websocket-chat/</li><li>Netty 实现聊天功能: https://waylau.com/netty-chat/</li><li>WebSocket 和 Golang 实现聊天功能: https://waylau.com/go-websocket-chat/</li></ul> 到此这篇关于“Node.js实现WebSocket聊天室的例子”的文章就介绍到这了,更多文章或继续浏览下面的相关文章，希望大家以后多多支持JQ教程网！您可能感兴趣的文章：
PHP聊天室_WebSocket技术实战
Node.js实现WebSocket聊天室的例子
[Golang]简单的聊天室实现
什么是 WebSocket？深入理解html5中WebSocket
什么是Websocket？解析h5中的Websocket
spring WebSocket的详细介绍
php中如何使用websocket（聊天室实例详解）
用PHP MySQL搭建聊天室
php怎么实现聊天功能
Websocket原理的深入理解
上一篇：go语言--数值类型
下一篇：gin-vue-admin 使用 go mod ， golang开发工具 提示package gin-vue-admin/core is not in GOROOT
[关闭]