用Socket.io创建实时聊天程序

一、网络基础

1、TCP连接的三次握手

第一次:客户端发送包给服务器,等待服务器确认

第二次:服务器接收包,确认客户端,同时发送一个包给客户端

第三次:客户端接收包,同时发送确认包给服务器,此包发送完毕即完成三次握手

2、socket原理

socket(套接字)是支持TCP/IP协议的网络通信的基本操作单位,包含五种信息:连接使用的协议、本地主机的IP地址、本地进程的协议端口、远地主机的IP地址、远地进程的协议端口,socket解决的就是进程之间的通信,可以看到有了这些信息就可以分辨不同的进程,从而通信。建立socket连接至少需要一对套接字,一个运行在客户端,称为ClientSocket,另一个运行在服务器端,称为ServerSocket,连接分为服务器监听、客户端请求、连接确认三个步骤。第一个步骤服务器进行实时监控网络状态,不定位具体的套接字;第二个步骤客户端提出请求,这个套接字需要描述的是需要连接的服务器的套接字,指出服务器套接字的地址和端口号;第三个步骤响应请求,服务器建立一个新的进程,同时把套接字发给客户端,客户端确认后双方就建立了连接,而此时服务器再次处于监听,继续接受其他客户端的请求。

我们知道HTTP连接是一种“短连接”,采用的是“请求-响应”的方式,也就是说只有客户端请求了数据,服务端才会响应数据。如果服务端有了新的数据,没有客户端的请求这些数据是不会传给客户端的。而socket连接则是数据的传递是实时发生在双方的连接状态中的,但是防火墙会关闭非活跃的socket连接,因此需要通过轮询告诉网络,连接是处于活跃状态的,如果两个连接结合就可以定时向服务端发送请求,既保持了客户端在线,也可以在服务端有新数据的时候传递给客户端。

二、创建简单的聊天程序

以下仅仅是socket.io的示例程序。

1、引入相关模块

const express = require('express');
const app = express();
const path = require('path');
const http = require('http').Server(app);
const io = require('socket.io')(http);

2、设置静态资源和监听端口

app.use(express.static(path.join(__dirname,"static")));
app.get('/', function(req, res) {    
        res.sendFile(__dirname + '/index.html');
});
http.listen(3001, function(){
        console.log('listening port 3001');
});

3、socket监听用户连接和端口

io.on('connection', function(socket){
    console.log('a user connected'); 
   socket.on('disconnect', function() { 
       console.log('user disconnected');
    });    
    socket.on('chat', function(msg){ 
       console.log(msg);        
        io.emit('chat', msg); 
   });
});

这里通过事件来监听,事件名可以自定义,这里只是通过这个名字来做出不同响应,我们可以看到on是监听,emit为触发,可以理解为向客户端发送套接字,所以我们同样需要在客户端确认请求。

4、客户端的书写




    忽如寄的聊天室
    


    我们在这里也可以看到emit和on作为触发和监听,当用户提交聊天信息后,触发chat,服务器监听到了请求后响应,接着服务器触发chat,客户端监听到了,作出响应,我们可以看到这对应的就是socket的整个连接过程。

    我们如果有几个人通过浏览器同时访问,发送信息就可以聊天了。

    用Socket.io创建实时聊天程序_第1张图片

    更加详细的说明你可以在Socket.io官网中的示例看到。

    最后是一个广告贴,最近新开了一个分享技术的公众号,欢迎大家关注

    用Socket.io创建实时聊天程序_第2张图片

    你可能感兴趣的:(用Socket.io创建实时聊天程序)