socket.io简易教程(群聊，发送图片，分组，私聊)

最新推荐文章于 2024-06-28 17:43:08 发布

neuqzxy

最新推荐文章于 2024-06-28 17:43:08 发布

阅读量2.7w

点赞数 13

分类专栏： chat聊天实战文章标签： node.js socket.io 实战图片发送分组聊天

本文链接：https://blog.csdn.net/NEUQ_zxy/article/details/77531126

版权

什么是Socket.io？

过去：

由于http是无状态的协议，所以实现聊天等通信功能非常困难，当别人发送一条消息时，服务器并不知道当前有哪些用户等着收消息，所以以前实现聊天通信功能最普遍的就是轮询机制了，客户端定期发一个请求，看看有没有人发送消息到服务器上了，如果有，服务器就将消息发给该客户端。

缺点显而易见，那么多的请求消耗了大量资源，有大量的请求其实是浪费了。

现在：

现在，我们有了WebSocket，他是HTML5的新api。 WebSocket 连接本质上就是一个 TCP 连接，WebSocket会通过http请求建立，建立后的WebSocket会在客户端和服务器端建立一个持久的连接，直到有一方主动的关闭了该连接。所以现在服务器就知道有哪些用户正在连接了，这样通讯就变得相对容易了。

Socket.io:

Socket.io实际上是WebSocket的父集，Socket.io封装了WebSocket和轮询等方法，他会根据情况选择方法来进行通讯。

本篇博客主要是介绍各种功能的实现，完整的demo项目开发请看《聊天室入门实战》

看看我已经部署的聊天项目demo

实战项目源码和本博客的源码都已上传至了github https://github.com/neuqzxy/chat ，欢迎下载，觉得不错就给个星星吧。

入门Socket.io

简单入门

官方文档

首先下载express和socket.io：

npm init
npm install --save express socket.io

然后新建一个app.js的文件，引包：

/**
 * Created by zhouxinyu on 2017/8/24.
 */
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

server.listen(3000, () => {
    console.log('server running at 127.0.0.1:3000');
});

上面这一段和我们平时的写法不太一样，因为socket.io是tcp连接，大家将它当做一个公式记住就可以了，下面的内容以前用app.get现在还是app.get，不受影响。

然后新建public文件夹用于存放前端静态资源，在public里新建一个01.html文件，在app.js中使用express将public文件夹静态出来。

app.use(express.static('./public'));

接下来就是socket.io了

前端js

从官网上把前端js抄下来：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
</head>
<body>
<h1>群聊</h1>
</body>
<script src="/socket.io/socket.io.js"></script>
<script>
    let socket = io.connect('http://localhost');
    socket.on('news', function (data) {
        console.log(data);
        socket.emit('my other event', { my: 'data' });
    });
</script>

</html>

src：这里的src就是这样的，这个socket.io.js代码不是放在静态资源目录中的，现在实际请求的路径是127.0.0.1:3000/socket.io/socket.io.js，你访问一下就会看到js代码了，当公式记住就行，没什么特别的。

io.connect: 这里面的路径实际上代表的是命名空间，这里是默认的命名空间“/”，如果URL是“http://localhost/abc"那就代表http请求连接到localhost下的abc命名空间中，如果不理解暂时当公式记住，到命名空间那一节再详细讲解。

socket.on：这个会jquery和node的应该就能猜出来了，这就是一个注册事件的api，实际上，我们通过socket.io进行通讯主要就是操作各种事件，这里注册了一个叫”new“的事件，服务器可以触发来实现客户端与服务器的交互。

后端js

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

});

和前端代码类似，这里一来就监听连接事件，之后的代码都在回调里写，因为必须要保持连接才能和响应事件。该回调里的参数socket就是这次连接中服务器和该客户端的socket，具有唯一性。

实现群聊功能：

服务端

/**
 * Created by zhouxinyu on 2017/8/24.
 */
const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

server.listen(3000, () => {
    console.log('server running at 127.0.0.1:3000');
});

app.use(express.static('./public'));

/*     socket.io 逻辑     */

io.on('connection', (socket) => {
    socket.on('sendMessage', (data) => {
        data.id = socket.id;
        io.emit('receiveMessage', data);
    })
});

就是监听客户端的发送消息事件然后通过io.emit触发群发事件。逻辑很简单没什么好说的，主要注意两点：

1. socket.id是socket的一个属性，存着这次socket连接的id，是唯一标识的，我们实现私聊就可以通过该id找到用户。

2. io.emit是触发广播的一个api，他可以将消息广播给所有用户，这就实现了群聊的功能。

客户端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>群聊</title>
</head>
<body>
<h1>群聊</h1>
<div st

最低0.47元/天解锁文章

neuqzxy

关注

13
点赞
踩
84

收藏

觉得还不错? 一键收藏
9
评论
socket.io简易教程(群聊，发送图片，分组，私聊)

什么是Socket.io？过去：由于http是无状态的协议，所以实现聊天等通信功能非常困难，当别人发送一条消息时，服务器并不知道当前有哪些用户等着收消息，所以以前实现聊天通信功能最普遍的就是轮询机制了，客户端定期发一个请求，看看有没有人发送消息到服务器上了，如果有，服务器就将消息发给该客户端。缺点显而易见，那么多的请求消耗了大量资源，有大量的请求其实是浪费了。现在：现在，...
复制链接

扫一扫

专栏目录