ajax聊天室创建群聊,js+node.js+socket.io实现聊天功能（私聊，创建群聊）

效果图：

这里启动了四个客户端进行测试

1. 登录，以及获取在线用户列表

2. 私聊功能

3. 群聊功能

偶然发现了WebSocket, 发现这个可以实时通信，在线聊天，所以就做了一个聊天工具的demo，记录一下

Socket.io

WebSocket是js原生自带的，而Socket.io相当于是对WebSocket进行封装的一个框架

官网说明：

介绍

Socket.io是一个WebSocket库，包括了客户端的js和服务器端的nodejs，它的目标是构建可以在不同浏览器和移动设备上使用的实时应用。它会自动根据浏览器从WebSocket、AJAX长轮询、Iframe流等等各种方式中选择最佳的方式来实现网络实时应用，非常方便和人性化，而且支持的浏览器最低达IE5.5

socket.io特点

实时分析： 将数据推送到客户端，这些客户端会被表示为实时计数器，图表或日志客户。

实时通信和聊天： 只需几行代码便可写成一个Socket.IO的”Hello,World”聊天应用。

二进制流传输： 从1.0版本开始，Socket.IO支持任何形式的二进制文件传输，例如：图片，视频，音频等。

文档合并： 允许多个用户同时编辑一个文档，并且能够看到每个用户做出的修改。

目录结构

新建文件夹 -> npm init -y 生成package.json 可以使用npm安装插件

使用npm安装express，socket.io

npm install express --save

npm install socket.io --save

安装完成的 package.json

{

"name": "websocketchat",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1"

},

"author": "",

"license": "ISC",

"dependencies": {

"express": "^4.17.1",

"socket.io": "^2.3.0"

}

}

connection 和 disconnect

这里只是一个例子，介绍一下连接、断开、接收消息，不包含在项目内

这两个事件是框架本身的内置事件

connection 监听客户端连接

disconnect 监听客户端断开

客户端代码

index.html

Title

window.socket = io();

socket.on('connect', () => {

window.socket.on('success', data => {

console.log(data)

})

window.socket.on('quit', (id) => {

console.log(`${id}连接断开`)

})

})

服务器代码

server.js

const fs = require('fs');

var express = require('express');

var app = express();

var http = require('http').Server(app);

var io = require("socket.io")(http);

// 路由为/默认www静态文件夹

app.use('/', express.static(__dirname + '/src'));

io.on('connection', socket => {

soc