Node.js+WebSocket创建简单聊天室

Seay 发布于2019-08-06 13:26 / 931人阅读

摘要：好的，这样以来我们的前期准备工作就已经完成了，下面我们来搭建聊天室对应的客户端和服务器端。

websocket简介

websocket其实HTML中新增加的内容，其本质还是一种网络通信协议，以下是websocket的一些特点：

    （1）因为连接在端口80（ws）或者443（wss）上创建，与HTTP使用的端口相同，几乎所有的防火墙都不会阻塞WebSocket链接
    （2）因为它使用HTTP 进行握手，所以该协议可以自然地集成到网络浏览器和HTTP服务器中
    （3）心跳消息（称为ping和pong）将反复被发送，保持WebSocket连接几乎一直处于活跃状态。基本上，一个节点周期性地发送一个小数据包另一个节点(ping)，而另一个节点则使用包含了相同数据的数据包作为响应(pong)。这将使这两个节点处于连接状态
    （4）WebSocket协议可以安全地支持跨域连接，避免Ajax和XMLHttpRequest上的限制
    （5）HTTP规范要求浏览器将并发连接数限制为每个主机名两个连接，但是在我手完成之后该限制就不再存在，因为此时连接已经不再是HTTP连接了

今天我将和大家分享如何利用Node.js及websocket来搭建一个简单的多人聊天室。

 对node.js稍微有所了解的朋友知道，node.js采用的包管理机制即，所以我们为使用websocket必须使用npm（包管理工具）来安装websocket所需要的包，首先在终端通过命令行的形式进入node.js中的node_modules的npm安装目录下，例如在我这台电脑上对应的路径就是：

D:Node.js ode_modules pm ode_modules，最后使用命令 **npm -install nodejs-websocket**来安装使用websocket时所需要的包。
好的，这样以来我们的前期准备工作就已经完成了，下面我们来搭建聊天室对应的客户端和服务器端。

搭建聊天室服务器端

以下这段代码是我搭建服务器端时所需的代码，大家在GitHub官网搜索一下很容易找到的一个模板：
   1  var ws = require("nodejs-websocket")
   2  var PORT = 3000 
   3 var clientCount = 0
       
   4  var server = ws.createServer(function (conn) {
   5     console.log("New connection")
   6     clientCount++
   7     conn.nickname = "user"+clientCount
   8    broadcast(conn.nickname+" comes in")
        
   9    conn.on("text", function (str) {
   10        console.log("Received "+str);
   11        broadcast(str)
                                       })
    
   12    conn.on("close", function (code, reason) {
   13        console.log("Connection closed")
   14        broadcast(conn.nickname+" left")
                                                 })
        
   15  conn.on("error",function(err){
   16        console.log("Handle Error");
   17        console.log(err);
                                     })
   18                                       }).listen(PORT)
   19      console.log("websocket listening on port:"+PORT)
    
   20      function broadcast(str){
   21          server.connections.forEach(function(connection) {
   22              connection.sendText(str)
             });
         }

服务器代码分析：

第1行：通过require（‘node-websocket’）来获取一个websocket对象，
第2、3行定义服务器的端口号即服务器端的客户连接数

第6行，每当服务器收到一个客户端发来的连接请求时，客户端数加1

第7行，给每个客户端取一个昵称

第8行，每当有客户端个服务器端建立连接时，服务器就向全部客户端广播一条消息：
userX comes in

第9~11行，当客户端和服务器建立连接时，服务器就向全部客户端广播消息，即将任意一个客户端发的消息转发给全体客户端

第12~14行是当有客户端关闭时，服务器告诉全体客户端userX left

第20-22是broadcast函数的实现

搭建客户端：

1
2
3
4
5
6
7 Document
8
9
10

ChatRoom

12
13

14
15
35
36

客户端代码分析：

第16行建议和服务器端的websocket连接

第17行~24行，当在输入框输入消息后点击发送按钮时，客户端向服务端发送消息

总结

总体来说客户端的搭建是比较简单的，就是使用4个常用的websock API（onopen,onclose,onerror,onmessage）,难点在于如何搭建服务器端。以上就是我分享的关于利用node.js和websocket来搭建一个简单的多人聊天室。最后附上结果运行图：

本例的源码下载地址：

链接：http://pan.baidu.com/s/1cdIatC 密码：6pxl

云服务器 GPU云服务器 websocket实现聊天室简单聊天室简单的php聊天简单的php聊天系统

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/61903.html

Node.js+WebSocket创建简单聊天室

摘要：好的，这样以来我们的前期准备工作就已经完成了，下面我们来搭建聊天室对应的客户端和服务器端。 websocket简介 websocket其实HTML中新增加的内容，其本质还是一种网络通信协议，以下是websocket的一些特点：（1）因为连接在端口80（ws）或者443（wss）上创建，与HTTP使用的端口相同，几乎所有的防火墙都不会阻塞WebSocket链接（2）因...

cppprimer 2019-08-22 11:09 评论0 收藏0
感谢有“你”-------socket.io

摘要：首先将的包拷贝到你的项目文件下，并在部分使用标签将其添加进去使用专业的函数创建一个端点当在消息框输入消息并点击发送按钮时，客户端就将向服务器端发送输入的消息，消息类型是。我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈---涛涛技术客栈。今天学习了websocket的一个框架---socket.io后瞬间感觉...

stackvoid 2019-08-22 11:10 评论0 收藏0
感谢有“你”-------socket.io

摘要：首先将的包拷贝到你的项目文件下，并在部分使用标签将其添加进去使用专业的函数创建一个端点当在消息框输入消息并点击发送按钮时，客户端就将向服务器端发送输入的消息，消息类型是。我此前曾发过一遍文章有关于如何利用node.js+websocket搭建一个简单的多人聊天室有兴趣的朋友可以关注我的技术客栈---涛涛技术客栈。今天学习了websocket的一个框架---socket.io后瞬间感觉...

FuisonDesign 2019-08-06 13:25 评论0 收藏0
搭建WebSocket简易聊天室

摘要：本文，我们通过和实现一个在线聊天室的。创建三个对象，一个作为多人在线聊天室，一个作为提示当前在线人数，还有一个为的作为在线人数显示文本。创建一个对象为作为消息发送输入框，用户可以在此输入消息进行发送。本文，我们通过Egret和Node.js实现一个在线聊天室的demo。主要包括：聊天，改用户名，查看其他用户在线状态的功能。大致流程为，用户访问网页，即进入聊天状态，成为新游客，通过底部...

Lowky 2019-08-23 11:53 评论0 收藏0