正文

使用nodesocket.io搭建简易聊天室

author  author  2023-02-07  456

关键词：

官方介绍(链接)

Socket.io是一个WebSocket库，会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，而且支持的浏览器最低达IE5.5。
Socket.io 服务器和 Socket.io 客户端之间全双工通信信道 尽可能使用WebSocket 连接建立(”尽可能“就说明要求客户端和服务端都必须使用http://socket.io的解决方案)，并将使用 HTTP 长轮询作为后备。
在了解socket-io前，我们先了解三种通信方式和Http轮询。

三种通信方式

全双工通信、单工通信、半双工通信都属于通信信道，提供传输数据的途径。

全双工通信：通信传输的术语，数据可以双向传递，并且是瞬时的，A到B和B到A是瞬时同步的，能力上相当于两个单工通讯方式的组合。
单工通信：消息只允许单方向的通讯，发送端和接收端是固定的，发送端只接收发送消息，不接收，接收端只接收消息，不发送。
半双工通信：数据可以双向传输，但不是瞬时的，必须交替进行。发送端和接收端的角色可以互换，在同一时间，数据只能在一个方向传输，相当于切换方向的单工通讯。

Http 短轮询、长轮询

早期网站进行数据推送的技术基本都是基于Http轮询。轮询是指客户端每隔一段时间向服务器端发送请求，服务器端接收到客户端请求后返回数据给客户端。客户端轮询的方式有两种：短轮询、长轮询。

短轮询：客户端每隔（比如5s）向服务器端发送普通的http请求，服务器端查询是否有数据更新，有更新返回客户端最新数据，无更新提示客户端无数据更新。
长轮询：客户端向服务器发送较长时间的http请求，并在超时前不会断开连接，待过了超时时间或者服务器端有数据返回时断开连接，紧接着会再次建立一个一样的http请求，重复操作。

socket-io

比websocket优势
1.由于使用了一些错误配置的代理而无法建立 WebSocket 连接，连接将回退到 HTTP 长轮询，
2.Socket.IO 包含一个心跳机制，它会定期检查连接的状态。服务器和客户端之间的 WebSocket 连接可能会中断，而双方都不知道链接的断开状态。当客户端最终断开连接时，它会以指数回退延迟自动重新连接，以免使服务器不堪重负。
3.当客户端断开连接时，数据包会自动缓冲，并在重新连接时发送。
区别
http和webscoket都是基于tcp，http建立的是短连接，websocket建立的是长连接
安装socket-io、express

npm install socket-io -S
npm install express@4 -S

服务端

监听服务器建立连接和断开连接

io.on(connection, socket => 

    console.log(a user connected!);

    //disconnect
    socket.on(disconnect, () => 
        console.log(a user disconnected!);
    )

向全体人员广播

io.sockets.emit(自定义参数，data)；

向全体人员广播

io.emit(自定义参数, data);

发送信息

socket.emit(自定义参数，data)

接收信息

socket.on(自定义参数，callback）

用户断开连接触发事件

socket.on(disconnect,callback);

信息传输对象为排除当前socket 对应的 client 的其他client

socket.broadcast.to(socketId ).emit(msg, msg)

向某房间发送消息

io.to(roomId).emit(event name, 
    // some data
)

加入/离开房间

// join room
socket.join(roomId);

// leave room
socket.leave(roomId);

服务端代码

const express = require(express);
const app = express();
const http = require(http);
const server = http.createServer(app);
// Express 初始化app可以提供给HTTP服务器的函数处理程序
const  Server  = require("socket.io");
const io = new Server(server);
// socket.io自动为我们服务客户端传递server（HTTP 服务器）对象来初始化 的新实例。然后我监听connection传入套接字的事件并将其记录到控制台

app.get(/, (req, res) => 
  res.sendFile(__dirname + /index.html);
);

let roomInfo = ;
let users = [];
io.sockets.on(connection, socket => 
  socket.on(disconnect, () => 
    console.log(`客户端断开链接`) 
  )
  socket.on(login, user => 
    if (-1 != users.indexOf(user)) 
      return false;
    
    users.push(user)
    io.sockets.emit(login, user)
    io.sockets.emit(updateUserList, users)
  )
  socket.on(chat, data => 
    console.log(data, data)
    io.sockets.emit(chat, data)
  )
  socket.on(creatGroup, data => 
    if (!(data.roomId in roomInfo)) 
      roomInfo[data.roomId] = data;
    
    io.sockets.emit(creatGroup, data.roomId)
  )
)
server.listen(3000, () => 
  console.log(listening on *:3000);
);

客户端
socket.emit(自定义参数，data) //发送信息
socket.on(自定义参数，callback//接收信息
部分js代码

<script src="/socket.io/socket.io.js"></script>
  <script>
  socket = io.connect();
    //登录
    loginDom.addEventListener(click, () => 
      let user = userDom.value.trim();
      if (!user) 
        alert(用户名为空)
        return
      
      socket.emit(login, user, 1)
    )
    // 创建群组
    creatGroupDom.addEventListener(click, () => 
      let user = userDom.value.trim();
      let group =  user, roomId: `room_id_$(Date.now())` 
      socket.emit(creatGroup, group)
    )
    // 监听创建群组
    socket.on(creatGroup, data => 
      creatGroupDom.innerHTML = `<dt>群组列表</dt>`
    )
    //服务器连接提示
    socket.on(connect, () => 
      addMsg(roomNoticeDom, `服务器连接成功`)
    )
    //登录
    socket.on(login, (user) => 
      addMsg(roomNoticeDom, `$user进入房间`)
      document.getElementById(user).disabled = true;
    )
    //更新用户列表
    socket.on(updateUserList, users => 
      userListDom.innerHTML = `<dt>用户列表</dt>`
      // userListDom.removeChild(ddDom)
      for (let user of users) 
        let dd = document.createElement(dd)
        dd.innerText = user;
        userListDom.appendChild(dd)
      
    )
    //监听消息
    socket.on(chat, (data) => 
      console.log(接收到消息)
      var item = document.createElement(li);
      item.style.background = #ff0
      item.textContent = `$data.user说：$data.message`;
      messages.appendChild(item);
      window.scrollTo(0, document.body.scrollHeight + 30);
    )
    //发送消息
    form.addEventListener(submit, (e) => 
      e.preventDefault();
      if (message.value) 
        console.log(message, user, 发送信息成功)
        socket.emit(chat,  message: message.value, user: userDom.value.trim() )
      
      message.value = ;
    )
  </script>

预览

使用node、Socket.io

nodejs构建多房间简易聊天室

1、前端界面代码　　前端不是重点，够用就行，下面是前端界面，具体代码可到github下载。2、服务器端搭建　　本服务器需要提供两个功能：http服务和websocket服务，由于node的事件驱动机制，可将两种服务搭建在同一个端口下... 查看详情

docker搭建swoole简易聊天室(代码片段)

docker搭建swoole的简易聊天室首先pull镜像dockerpulldocker.io/kong36088/nginx-php7-swoole创建容器dockerrun--name自己创建的名字-p9501:9501-p8089:80-d-itkong36088/nginx-php7-swoole/bin/bash进入容器dockerexec-it容器名字或id/bin/bash进查看详情

swoole用websocket服务器搭建一个简易的聊天室功能(代码片段)

swoole用WebSocket服务器搭建一个简易的聊天室功能域名无ssl加密域名有ssl加密开启服务端常链接浏览器分别开启两个客户端窗口，进行聊天域名无ssl加密WS.php写服务端代码<?phpclassWSprivate$ws=null;publicfunction__construct()//创建Web... 查看详情

swoole用websocket服务器搭建一个简易的聊天室功能(代码片段)

websocket搭建简易的聊天室--勿喷(代码片段)

因为本人做了信息的存储所以还用到的mysql，如果不做存储的话只能吧相应的代码注释即可。node初始化npminit安装以下两个依赖"mysql":"^2.18.1","nodejs-websocket":"^1.7.2"建立一个app.jsvarws=require("nodejs-webs... 查看详情

unity简易聊天室（基于tcp）

客户端用Unity开发，主要就是搭建一下聊天室的UI界面：输入框，聊天内容显示框，发送按钮灰色背景的就是Message，也就是聊天内容的显示框，是一个Text类型，这里创建UI方面就不多讲了在Canvas下挂一个ChatManager脚... 查看详情

day389.使用javanio实现简易在线多人聊天室-nio(代码片段)

使用JavaNIO实现简易在线多人聊天室一、服务端代码packagechatroom.server;importjava.io.IOException;importjava.net.InetSocketAddress;importjava.nio.ByteBuffer;importjava.nio.channels.*;importjava.nio.charset.Charset;importja 查看详情

day389.使用javanio实现简易在线多人聊天室-nio(代码片段)

vue使用websocket模拟实现聊天功能-简易版(代码片段)

vue使用WebSocket模拟实现聊天功能-简易版效果展示两个浏览器相互模拟1.创建模拟node服务在vue根目录下创建server.js文件模拟后端服务器**在server终端目录下载**npminstall--sws2.编写server.js文件代码如下varuserNum=0;//统计在线人数varchat... 查看详情

vue+socket.io实现一个简易聊天室

...p; vue+vuex+elementUi+socket.io实现一个简易的在线聊天室，提高自己在对vue系列在项目中应用的深度。因为学会一个库或者框架容易，但要结合项目使用一个库或框架就不是那么容易了。功能虽然不多，但还是有收获。设... 查看详情

前端小demo:使用socket实现简易网络聊天室(代码片段)

项目实现截图1.实现原理websocket首先我们要知道http是一种无状态协议，无法轻松实现实时应用。服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。我们可以实现捕获浏览器上的事件，通过事件... 查看详情

es6模块化，websoket（附简易聊天室源码）以及webpack的详细使用(代码片段)

一、es6模块化1.1使用es6模块化步骤：(1)使用export暴露数据(2)使用import引入模块(3)在html中引入js文件，注意为script的属性设置type="module"1.2export1.2.1暴露单个暴露语法1：exportlet变量1=值1; exportvar变量2=值2;ex... 查看详情

socket入门笔记用tcpclient实现一个简易聊天室

效果实现思路使用TcpListener建一个服务器,接收所有客户端发送的消息,然后由服务器再发送到其他客户端客户端使用TcpClient,发消息给服务器,接收服务器的消息,不和其他客户端直接交互服务器端接收客户端开启一个线程,死循... 查看详情

如何制作一个简易的web聊天室（思路）

在这里我先把自己的思路分享一下：　　聊天室的静态资源如聊天室的外观一类，使用静态的html直接编写。　　聊天消息则通过ajax去数据库读取并动态输出在页面上，同时设置好定时函数，让数据聊天消息在固定周期内不断刷... 查看详情

第92题java高级技术-网络编程11（简易聊天室6：使用socket通信)

回城传送–》《JAVA筑基100例》文章目录零、前言一、题目描述二、解题思路三、代码详解四、推荐专栏五、示例源码下载零、前言今天是学习JAVA语言打卡的第92天，每天我会提供一篇文章供群成员阅读（不需要订阅付钱），... 查看详情

第93题java高级技术-网络编程12（简易聊天室7：使用socket传递对象)

回城传送–》《JAVA筑基100例》文章目录零、前言一、题目描述二、解题思路三、代码详解四、推荐专栏五、示例源码下载零、前言今天是学习JAVA语言打卡的第93天，每天我会提供一篇文章供群成员阅读（不需要订阅付钱），... 查看详情

第94题java高级技术-网络编程13（简易聊天室8：使用socket传递图片)

回城传送–》《JAVA筑基100例》文章目录零、前言一、题目描述二、解题思路三、代码详解四、推荐专栏五、示例源码下载零、前言今天是学习JAVA语言打卡的第94天，每天我会提供一篇文章供群成员阅读（不需要订阅付钱），... 查看详情

正文

使用nodesocket.io搭建简易聊天室

官方介绍(​​链接​​)

三种通信方式

Http 短轮询、长轮询

socket-io

nodejs构建多房间简易聊天室

docker搭建swoole简易聊天室(代码片段)

swoole用websocket服务器搭建一个简易的聊天室功能(代码片段)

swoole用websocket服务器搭建一个简易的聊天室功能(代码片段)

websocket搭建简易的聊天室--勿喷(代码片段)

unity简易聊天室（基于tcp）

day389.使用javanio实现简易在线多人聊天室-nio(代码片段)

day389.使用javanio实现简易在线多人聊天室-nio(代码片段)

vue使用websocket模拟实现聊天功能-简易版(代码片段)

vue+socket.io实现一个简易聊天室

前端小demo:使用socket实现简易网络聊天室(代码片段)

es6模块化，websoket（附简易聊天室源码）以及webpack的详细使用(代码片段)

socket入门笔记用tcpclient实现一个简易聊天室

如何制作一个简易的web聊天室（思路）

第92题java高级技术-网络编程11（简易聊天室6：使用socket通信)

第93题java高级技术-网络编程12（简易聊天室7：使用socket传递对象)

第94题java高级技术-网络编程13（简易聊天室8：使用socket传递图片)

第93题java高级技术-网络编程12（简易聊天室7：使用socket传递对象)

官方介绍(链接)