Node.js websocket使用socket.io库实现实时聊天室
认识websocket
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duple)。一开始的握手需要借助HTTP请求完成。
其实websocket 并不是很依赖Http协议，它也拥有自己的一套协议机制，但在这里我们需要利用的socket.io 需要依赖到http 。
之前用java jsp写过一个聊天，其实实现逻辑并不难，只是大部分时间都用在UI的设计上，其实现原理就是一个基于websocket的通信，要想做一个好的聊天室，我觉得大部分精力可能更应该花在与用户的视觉层交互上。
废话不闲扯，我们先来看一下websocket 与传统的ajax 有什么不同之处。
在之前，如果我们想要获取到服务器更新的信息，我们可以使用ajax 轮询来完成，然而，这样做的弊端是增大了我们与服务器的交互次数，然而极大部分的交互都是无意义的，因为我们只是做一个询问，如果没有任何新的信息，我们几乎什么都不用做，因此这样会极大的浪费服务器资源和带宽。
然而使用websocket 会使客户端与服务器建立一个长连接，并且，当服务器有新消息时可以主动推送到客户端，所以我们可以不用一次次的去询问服务器是否有新消息，而是直接由服务器主动推送到客户端，这样在无消息的状态下，客户端不会频繁的去请求服务器。
使用websocket 的特点在于服务器可以主动推送消息到客户端。
使用socket.io 库实现实时聊天
这也是这篇博文的主题之处。socket.io发布到npm 平台上，我们可以直接用npm 来安装到**当前**node_modules目录下。
npm install socket.io --save
下面我们就可以直接使用require 方法来将这个模块引入
const socket = require("socket.io");
在创建此websocket 服务器之前，它需要依赖于一个已经创建好的http服务器。
let socketServer = socket.listen(require("http").createServer((req,resp) => {
//返回页面
resp.end(require("fs").readFileSync("./socketIOTest1.html"));
}).listen(9999,"localhost",() => {console.log("listening");}));
在上述代码中socketIOTest1.html 是在当前目录下的一个html文件，在下面我会贴上详细的代码，这里先稍稍带过。
在websocket 服务器对象中有一个connection事件，这个事件在有客户端连接到socket服务器时被触发。下面我们监听这个事件，打印一句话来表示有用户连接。
//监听connection 事件
socketServer.on("connection",socket => {
console.log("有一用户连接");
}
上述代码中，callback有一个参数socket为连接到客户端的一个socket端口对象，这个对象有一个message 事件，当客户端有消息推送到服务器时，事件循环会取出这个事件与之对应的回调函数并执行。
socket.on("message",msg => {
console.log(msg);
});
同时，socket对象还可以监听disconnect 事件，来监听用户断开连接的情况
socket.on("disconnect",() => {
console.log("有一用户退出连接");
});
因为我们这次的主题是要创建一个能够实时聊天的聊天室，因此光有这些是不够的，我们还需要一个能够与用户交互的客户端。
下面是我的socketIOTest代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea name="" id="content" cols="30" rows="10" ></textarea>
<input id="write" type="text" placeholder="please write content here">
<input id="send" type="button" value="send" />
<script src="./socket.io/socket.io.js"></script>
<script>
let send = document.getElementById("send");
let write = document.getElementById("write");
let content = document.getElementById("content");
let socket = io.connect();
//发送消息
send.onclick = () => {
let msg = write.value;
// content.innerHTML = content.value + msg + "\n";
socket.send(msg);
};
//接收到消息
socket.on("message",msg => {
console.log("从服务器接收到的消息 ： " + msg);
//更新内容
content.innerHTML = content.value + msg + "\n";
});
socket.on("disconnect",() => {
console.log("与服务器断开连接");
});
</script>
</body>
</html>
在上述代码中，我用script标签引入了一个socket.io.js文件，这个文件不需要另外去下载，而直接引入即可，因为socket.io.js是被包含于socket.io模块中，在上面node的程序代码中，我们通过require方法引入了socket.io模块，因此我们可以直接通过相对路径访问到它。
<script src="./socket.io/socket.io.js"></script>
接下来我们就可以在script标签中使用如同服务端的代码。
let socket = io.connect();
使用io.connect()方法连接到websocket服务器，该方法返回一个与连接的服务器与之对应的一个socket端口对象。
下面我们同样监听message 和 disconnect事件。
//接收到消息
socket.on("message",msg => {
console.log("从服务器接收到的消息 ： " + msg);
//更新内容
content.innerHTML = content.value + msg + "\n";
});
socket.on("disconnect",() => {
console.log("与服务器断开连接");
});
为了更能突出websocket的作用，在html代码中，我只使用了一个textarea标签来显示内容，两个input标签用于发送。
使用socket对象的send方法就能使消息在服务器与客户端进行消息传递。
websocket群聊实现
现在我们假设一个场景，有u1和u2两个用户，同时连接到服务器，那么我们怎么使他们互相通信呢，实现的方法及其简单。当u1连接到服务器，在服务器中，使用一个map键值对把与u1对应的socket对象进行保存。
//创建一个用于放置用户对象的map
let map = new Map();
//用于记录用户数量的变量,并初始化为0
let userCount = 0;
//监听connection 事件
socketServer.on("connection",socket => {
console.log("有一用户连接");
map.set(++userCount,socket);
//...
});
与此同时，u2也连接上服务器，也由该map把与u2与之对应的socket对象进行储存。
现在，u1点击了send按钮发送一条消息至服务器，服务器收到消息后遍历map，转发给所有socket对象，实现群聊的实时通信。
socketServer.on("connection",socket => {
console.log("有一用户连接");
map.set(++userCount,socket);
//监听客户端来的信息
socket.on("message",msg => {
//从客户端接收的消息
//遍历所有用户
map.forEach((value,index,arr) => {
value.send(msg);
});
});
});
下面我贴上服务端的完整代码，仅供参考
const socket = require("socket.io");
//创建一个websocket服务器
let socketServer = socket.listen(require("http").createServer((req,resp) => {
//返回页面
resp.end(require("fs").readFileSync("./socketIOTest1.html"));
}).listen(9999,"localhost",() => {console.log("listening");}));
//创建一个用于放置用户对象的map
let map = new Map();
//用于记录用户数量的变量,并初始化为0
let userCount = 0;
//监听connection 事件
socketServer.on("connection",socket => {
console.log("有一用户连接");
map.set(++userCount,socket);
//监听客户端来的信息
socket.on("message",msg => {
//从客户端接收的消息
//遍历所有用户
map.forEach((value,index,arr) => {
value.send(msg);
});
});
//监听客户端退出情况
socket.on("disconnect",() => {
console.log("有一用户退出连接");
});
});
websocket私聊实现
在说私聊的实现之前，我们首先要找到对于每一个用户的唯一标识，在通常的项目开发中，我们都使用用户的用户名进行标识，每个用户通过注册获得与之对应的用户名。将用户名保存在数据库中利用主键防止重复。
实现私聊的方法有很多种，这里我的实现方法是这样的：
① 当用户连接时，把用户的socket端口对象使用map进行储存，储存的key 为用户的socket对象，value为用户的用户名，写一个方法用于更新客户端列表
② 用户默认用户名为 <未命名>，指定自定义用户名时，使用socket.emit方法触发服务端的某个事件，遍历map找到与之对应的key，进行value修改
③ 发送消息时，根据选择列表来指定要发送的人，在服务端，遍历map，找到要发送到的用户名，进行发送，同时更新到自己的聊天框
以上就是私聊的简单实现。
下面看一下具体代码：
//Node.js
const socket = require("socket.io");
//创建一个websocket服务器
let socketServer = socket.listen(require("http").createServer((req,resp) => {
//返回页面
resp.end(require("fs").readFileSync("./socketIOTest1.html"));
}).listen(9999,"localhost",() => {console.log("listening");}));
//创建一个用于放置用户对象的map
let map = new Map();
//用于记录用户数量的变量,并初始化为0
let userCount = 0;
//遍历map
let scanMap = func => {
try{
map.forEach((value,index,arr) => {
func(value,index,arr);
});
}
catch(e){
if(e.message == "break"){
return;
}
else{
throw e;
}
}
}
//通知客户端弹出对话框
let showDialog = (socket,msg) => {
socket.emit("showDialog",msg);
}
//更新用户列表
let updateList = socket => {
let userArr = [];
scanMap((value,index) => {
if(value != undefined){
userArr.push(value);
}
});
socket.emit("newUser",userArr);
}
//监听connection 事件
socketServer.on("connection",socket => {
console.log("有一用户连接");
//初始化存储当前socket对象
map.set(socket,"<未命名>");
//将用户信息写入map
socket.on("getUser",user => {
//修改名称
map.set(socket,user);
scanMap((value,index) => {
updateList(index);
});
});
//通知所有客户端更新列表
scanMap((value,index) => {
updateList(index);
});
//监听客户端来的信息
socket.on("message",msg => {
//从客户端接收的消息
let sender;
//遍历所有用户
scanMap((value,index) => {
if(index == socket){
sender = value;
}
});
scanMap((value,index) => {
if(msg.person == "all"){
index.send(sender + " : " + msg.msg);
}
else if(msg.person == value){
socket.send(sender + " : " +msg.msg);
index.send(sender + " : " +msg.msg);
throw new Error("break");
}
});
});
//监听客户端退出情况
socket.on("disconnect",() => {
//用户退出，从map里删除该用户
map.set(socket,undefined);
//通知所有用户更新列表
scanMap((value,index) => {
updateList(index);
});
console.log("有一用户退出连接");
});
});
客户端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<textarea name="" id="content" cols="30" rows="10" ></textarea>
<input id="write" type="text" placeholder="please write content here">
<input id="send" type="button" value="send" />
<input type="text" id="user" placeholder="user">
<select style="width: 100px;" size="2" name="" id="userList">
<option value="all">群聊</option>
</select>
<script src="./socket.io/socket.io.js"></script>
<script>
let send = document.getElementById("send");
let write = document.getElementById("write");
let content = document.getElementById("content");
let user = document.getElementById("user");
//用户列表
let userList = document.getElementById("userList");
let socket = io.connect();
//判断用户名是否为空
let isUserEmpty = () => {
if(user.value == ""){
alert("请填写用户名");
return false;
}
else {
return true;
}
}
//监听用户名变化
let oldUser;
user.onblur = () => {
if(isUserEmpty()){
//防止重复发射
if(oldUser == user.value){return;}
oldUser = user.value;
socket.emit("getUser",user.value);
}
}
//发送消息
send.onclick = () => {
if(isUserEmpty()){
let msg = write.value;
// content.innerHTML = content.value + msg + "\n";
socket.send({msg:msg,person:userList.value});
}
if(select.value == ""){
alert("请选择一个聊天对象");
}
};
//接收到消息
socket.on("message",msg => {
console.log("从服务器接收到的消息 ： " + msg);
//更新内容
content.innerHTML = content.value + msg + "\n";
});
socket.on("disconnect",() => {
console.log("与服务器断开连接");
});
//新用户加入聊天室
socket.on("newUser",arr => {
userList.innerHTML = "";
let all = document.createElement("option");
all.innerHTML = "群聊";
all.setAttribute("value","all");
userList.appendChild(all);
//添加新用户
arr.forEach((value,index) => {
console.log("value :" + value + "index :" + index);
let option = document.createElement("option");
option.innerHTML = value;
option.setAttribute("value",value);
userList.appendChild(option);
userList.setAttribute("size",userList.children.length);
});
//默认选中群聊
userList.value = "all";
});
//接收服务器需要弹出对话框的需求
socket.on("showDialog",msg => {
alert(msg);
});
</script>
</body>
</html>
代码的具体我就不在详细讲解，都标有注释，由于只是用于博文，整体代码没有重构优化，大家看不懂的可以回复我，或者有什么地方错误请指出，我会及时改正。
另外在这个聊天室中，当用户刷新频率较快时，websocket会出现伪连接现象。
下面附上我的github地址，大家可以下载我的源码进行修改学习，共勉。
https://github.com/HaoDaWang/chat
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
websocket+node.js实现实时聊天系统问题咨询
1.最近新学习websocket.做了一个实时聊天.用Node.js搭建的服务:serevr.js. 两个相互通信页面:client.html 和server.html 但是就是有很多问题,想让知道的人帮我看看哈: 我先把代码贴出来: server.js: var ws=require("nodejs-websocket"); console.log("开始建立连接..."); var str1=null,str2=null, clientReady=false,s
-
WebSocket+node.js创建即时通信的Web聊天服务器
本文实例node.js创建即时通信的Web聊天服务器,供大家参考,具体内容如下 1.使用nodejs-websocket nodejs-websocket是基于node.js编写的一个后端实现websocket协议的库, 连接:https://github.com/sitegui/nodejs-websocket. (1)安装 在项目目录下通过npm安装:npm install nodejs-websocket (2)创建服务器 //引入nodejs-websocket var ws
-
Node.js中使用socket创建私聊和公聊聊天室
先给大家展示效果图: 在上篇文章给大家介绍使用Angular和Nodejs.socket.io搭建聊天室及多人聊天室,本文继续介绍Node.js中使用socket创建私聊和公聊聊天室,具体详情请看下文吧. nodejs的应用中,关于socket应该是比较出彩的了,socket.io在github上有几万人的star,它的成功应该是不输于express的,为了方便了解整个socket.io的使用. 例子请点击http://chat.lovewebgames.com/ 源码下载https://git
-
node.js + socket.io 实现点对点随机匹配聊天
真心佩服那些可以经常发布笔记的人,其实我也想经常发来的,奈何技术不够加上懒,要向大神们多多学习了,前段时间有用bomb平台自带的socket写一个聊天室,其实基本就是改了改它的demo,这次想实现一个随机私聊,所以自己基于node 和 socket.io 来搭服务,当然,第一次用node做东西玩,虽然做的不好,但是也蛮分享下哈. 先说说用到的东西, node 用来做后台服务,express 用来托管静态资源,然后socket.io 用来传送聊天数据.接下来说说思路,其实用socket.io来传数
-
基于Node.js + WebSocket打造即时聊天程序嗨聊
前端一直是一块充满惊喜的土地,不仅是那些富有创造性的页面,还有那些惊赞的效果及不断推出的新技术.像node.js这样的后端开拓者直接将前端人员的能力扩大到了后端.瞬间就有了一统天下的感觉,来往穿梭于前后端之间代码敲得飞起,从此由前端晋升为'前后端'. 本文将使用Node.js加web socket协议打造一个网页即时聊天程序,取名为HiChat,中文翻过来就是'嗨聊',听中文名有点像是专为寂寞单身男女打造的~ 其中将会使用到express和socket.io两个包模块,下面会有介绍. 源码 源码
-
node.js 用socket实现聊天的示例代码
本文介绍了node.js 用socket实现聊天的示例代码,分享给大家,也给自己留个笔记,具体如下: 服务器搭建 app.js const http = require("http"); const express = require("./express"); //创建一个服务 const server = http.createServer(express); //监听服务端口 server.listen(8001,()=>{ console.log(&q
-
Node.js websocket使用socket.io库实现实时聊天室
认识websocket WebSocket protocol 是HTML5一种新的协议.它实现了浏览器与服务器全双工通信(full-duple).一开始的握手需要借助HTTP请求完成. 其实websocket 并不是很依赖Http协议,它也拥有自己的一套协议机制,但在这里我们需要利用的socket.io 需要依赖到http . 之前用java jsp写过一个聊天,其实实现逻辑并不难,只是大部分时间都用在UI的设计上,其实现原理就是一个基于websocket的通信,要想做一个好的聊天室,我觉得大部
-
node.js中使用socket.io制作命名空间
如果开发者想在一个特定的应用程序中完全控制消息与事件的发送,只需要使用一个默认的"/"命名空间就足够了.但是如果开发者需要将应用程序作为第三方服务提供给其他应用程序,则需要为一个用于与客户端连接的socket端口定义一个独立的命名空间. io.of(namespace) 制作两个命名空间 chat和news然后在客户端相互发送信息. 复制代码 代码如下: var express=require("express"); var http=require("h
-
基于Nodejs利用socket.io实现多人聊天室
socket.io简介 在Html5中存在着这样的一个新特性,引入了websocket,关于websocket的内部实现原理可以看这篇文章,这篇文章讲述了websocket无到有,根据协议,分析数据帧的头,进行构建websocket.虽然代码短,但可以很好地体现websocket的原理. ,这个特性提供了浏览器端和服务器端的基于TCP连接的双向通道.但是并不是所有的浏览器都支持websocket特性,故为了磨平浏览器间的差异,为开发者提供统一的接口,引入了socket.io模块.在不支持webs
-
node.js中使用socket.io的方法
使用socket.io的使用创建一个socket.io服务器即可.但是该服务器依赖于一个已经创建的http服务器. 在http服务器运行之后,使用listen方法为该http服务器附加一个socket.io服务器. 复制代码 代码如下: var sio=require("scoket.io"); var socket=sio.listen(server); socket就是在server基础上创建的一个socket.io服务器. 当客户端与服务器端建立连接时,触发socket.io服务
-
vue + socket.io实现一个简易聊天室示例代码
vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服
-
node.js中的socket.io入门实例
关于websocket等反向ajax技术介绍 在实时web应用中,常见的方法是反向Ajax.反向Ajax的定义: 反向Ajax(Reverse Ajax)本质上则是这样的一种概念:能够从服务器端向客户端发送数据.在一个标准的HTTP Ajax请求中,数据是发送给服务器端的,反向Ajax可以某些特定的方式来模拟发出一个Ajax请求,这些方式本文都会论及,这样的话,服务器就可以尽可能快地向客户端发送事件(低延迟通信). 反向Ajax技术主要有两点内容:一是服务器端保持住TCP连接直到其有数据发送给客
-
node.js中的Socket.IO使用实例
1. 简介 首先是Socket.IO的官方网站:http://socket.io 官网非常简洁,甚至没有API文档,只有一个简单的"How to use"可以参考.因为Socket.IO就跟官网一样简洁好用易上手. 那么Socket.IO到底是什么呢?Socket.IO是一个WebSocket库,包括了客户端的js和服务器端的nodejs,它的目标是构建可以在不同浏览器和移动设备上使用的实时应用.它会自动根据浏览器从WebSocket.AJAX长轮询.Iframe流等等各种方式中选择最
-
node.js中的socket.io的广播消息
在多个客户端与服务器端建立连接后,socket.io()服务器具有一个sockets属性,属性值为所有与客户端建立连接的socket对象.可以利用该对象的send方法或emit方法向所有客户端广播消息. io.sockets.send("user commected); io.socket.emit("login",names); 案例 server.js代码: 复制代码 代码如下: var express=require("express"); var
-
使用socket.io制做简易WEB聊天室
使用socket.io做一个简单的WEB聊天室,可消息私发,供大家参考,具体内容如下 1. 创建一个空的工程目录 空的目录命名为chat-web 2. 创建package.json 使用命令:npm init,会引导你设置package.json的内容. 3.安装依赖包 使用命令: npm install --save express npm install --save socket.io 安装完成后你会在工程目录看见有自动生成的node_modules文件夹 4.编写index.js脚本 v