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

Web前端 来源:忽如寄 85℃ 0评论

一、网络基础

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、客户端的书写

<!doctype html>
<html>
<head>
    <title>忽如寄的聊天室</title>
    <link rel="stylesheet" href="/index.css" rel="nofollow" target="_blank" >
</head>
<body>
<ul id="messages"></ul>
<form action="">
    <input id="m" autocomplete="off" />
    <button>Send</button>
</form>
<script src="https://cdn.socket.io/socket.io-1.2.0.js" rel="nofollow" target="_blank" ></script>
<script src="http://code.jquery.com/jquery-1.11.1.js" rel="nofollow" target="_blank" ></script>
<script>
    var socket = io();
    $('form').submit(function(){
        socket.emit('chat', $('#m').val());
        $('#m').val('');
        return false;
    });
    socket.on('chat', function(msg){ 
       $('#messages').append($('<li>').text(msg));
    });
</script>
</body>
</html>

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


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

关闭

IT问道推荐

银行贷款频频被拒?
“Dr信用牛牛”让你远离信用污点 国内首家信用健康管理平台免费为你提供信用修复方案