前端小Demo:使用Socket实现简易网络聊天室

项目实现截图

1.实现原理

websocket

首先我们要知道 http是一种无状态协议，无法轻松实现实时应用。服务器只会响应来自客户端的请求，但是它与客户端之间不具备持续连接。我们可以实现捕获浏览器上的事件，通过事件跟服务器进行数据交互，使用ajax技术。但是反过来却不可能实现：服务器发生了一个事件，服务器不会主动去跟客户端交互。你们想一想，如果有一天百度像你发送了一个请求，会不会觉得很诡异。

可是聊天室确实存在。聊天室是要保持客户端和服务器持续连接，且服务器能主动给客户端发送消息，实现方式如下：

长轮询：

客户端每隔很短的时间，当时通过setinterval每隔多少秒都会对服务器发出请求，查看是否有新的消息，只要轮询速度足够快，就能给人造成交互是实时进行的感觉。这种做法实属无奈，实际上会对服务器、客户端双方都造成了大量的性能浪费。

长连接：

客户端跟服务器连接一次，连接上之后就不断开，服务器不给客户端响应，服务器有了新数据就将数据发回去，又有了新数据，就将数据发回来，而一直保持阻塞状态。这种做法也会造成大量的性能浪费。
H5提供了一个新技术解决这些问题：websocket
websocket协议能够让浏览器和服务器进行全双工实时通信，全双工就是互相之间都能主动发送消息了，服务器也能主动给客户端发送消息。

websocket的原理：

利用http请求产生握手，http头部中含有websocket协议的请求，所以握手之后，二者转用tcp协议进行交流，tcp是一个比较底层的协议，可以实现实时通信。现在的qq使用的就是这个协议。
所以websocket协议需要浏览器支持，也需要服务器支持。
支持websocket协议的浏览器：Chrome4、FireFox4、Safari5
支持websocket协议的服务器：Node0、Apache7.0.2、Nginx1.3
可以看出，nodejs天生就支持websocket协议，但是从底层一步一步搭建nodejs服务器来处理tcp协议的工程是很庞大的，所以现在有一个通用的第三方模块来处理websocket - socket.io

socket.io

如何下载

npm i socket.io -S

官网

http://socket.io/

2.socket搭建

搭建一个聊天室：

1.创建一个web服务器

const http = require('http')
const server = http.createServer((req,res)=>{
   
    res.setHeader('content-type','text/html;charset=utf8')
    res.end("这是web服务器")
})
server.listen(3000)

2.接下来导入socket.io

并通过socket.io将web服务器转换成一个长连接服务器，且将客户端需要一个js文件路径暴露出去：

const socketIO = require('socket.io')

const io = socketIO(server)

此时，我们通过服务器就能访问到一个地址：http://locahost:3000/socket.io/socket.io.js，最终能响应得到一个js文件地址。

客户端通过这个地址就能跟服务器进行即时通信了。

客户端代码：

<script src="/socket.io/socket.io.js"></script>
<script>
const socket = io()
</script>

3.有关socket对象

客户端导入的这个js文件中，暴露了io函数，调用得到一个socket对象。

socket其实一个套接字，类似于插座，此时服务器有一个插座，客户端有一个插头，只要能将两边连接在一起就能进行通信了。

得到的socket这个套接字对象，他的使用方法是使用事件的机制：

socket对象有一个emit方法，用来触发事件 - 发送消息

socket对象有一个on方法，来绑定事件 - 监听是否消息接收到

// 接收消息
socket.on('message',message=>{
   
    // 监听message事件，只要对方触发了message事件，message就是对方发送过来的数据
    console.log(message)
})
// 发送消息
socket.emit('send',数据) // 表示触发了事件send，并在触发事件的时候将数据传送了过去

4.服务器的操作：

我们创建好的io对象需要绑定一个固定的事件 - connection，如果有客户端连接过来，就会触发这个事件

io.on('connection',socket=>{
   
    // 有客户端连接来，会得到一个socket对象，这个socket跟客户端的socket是同一个，就表示插头和插座连接在一起了，所有这个socket也可以进行绑定事件和触发事件
    // 通信
    socket.emit('message',数据)
    
    socket