Node.jswebsocket使用socket.io库实现实时聊天室_socket.io和websocket区别资源-CSDN文库

disconnect

5 浏览量 2021-01-02 07:48:53 上传评论 1 收藏 120KB PDF 举报

资源推荐

资源详情

资源评论

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>

<head>

<title>Document</title>

</head>

<body>

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标签中使用如同服务端的代码。

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对象进行储存。

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38747815

粉丝: 54
资源: 889

Node.js websocket使用socket.io库实现实时聊天室

最新资源

Node.js websocket使用socket.io库实现实时聊天室

nodeJS+socket.io做一个简单的聊天室

使用Node.js+Socket.IO搭建WebSocket实时应用

Node.js-NodeJSSocket.io实现的一个在线聊天室

Node.js-基于nodejs-websocket模块Socket.io库实现多人在线聊天室

使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室

Node.js-node和socket.iol实现简易聊天室

NodeJS_Chat:使用Node.js和socket.io的秘密聊天室

在线聊天室（网页版，node.js和socket.io实现）

Node.js-使用socket.ionode.js实现的一个简单的点对点以及点对多的聊天室

使用socket.io实现简单聊天室案例

毕业设计-基于vue与JavaScript的聊天室、websocket、socket.io实现

nodejs_simple_chatroom:使用 socket.io 和 node.js 的简单聊天室

Node.js-node.js利用socket.io实现多人在线匹配联机五子棋

聊天室：使用socket.io和express.js创建聊天室

node.js+socket.io离线包+聊天室源码

chat-websocket, 一个使用 web socket的简单聊天演示.zip

毕设 基于nodejs+websocket+socket.io实现仿网页版微信的简易聊天室.zip

Node.js-expresssocket.io聊天室

realtime-chat-room:使用 nodejs、serverjs 和 socket.io 的实时聊天室

socket-IO-chat-nodejs:Node.js使用socket.io聊天并表达

基于koa+node.js+socket.io实现简易聊天室源码.zip

node.js-socket.io-server:node.js+socket.io 使用websocket 方式聊天 服务器端代码

NodeChat:Node.js 服务器与 socket.io(websocket) 聊天

并行程序设计导论课后答案_2.7z

加速度积分求速度和位移的c语言算法程序

数据结构课设用C、C++写旅游区景点导游系统头文件(用文件存储，DFS，DIJ算法），完全免费！没有要积分，能多给我点点赞吗？

T5L与PC上位机modbus通信

DeepLearning之LSTM模型输入参数：time_step, input_size, batch_size的理解

最新资源

毕设基于nodejs+websocket+socket.io实现仿网页版微信的简易聊天室.zip

node.js-socket.io-server:node.js+socket.io 使用websocket 方式聊天服务器端代码