WebSocket的具体作用,长链接和短连接的优势

在讲这个之前，有许多小伙伴问过我，网页长链接和短链接，还有http是不是短连接…

1. 其实浏览器默认是长链接的,只是你在后端引入http以后,从长链接变为短链接,这么说可能不太严谨。那我换个说法，http阻拦了默认的长链接，你可以理解他为分割器，至于为什么要特意的改为短链接。。。。
   答案是节省服务端资源，缓解压力

这里给大家简单说一下webSocket的具体作用
WebSocket可以实现客户端与服务端之间数据的实时通信。（长连接）

网络通信过程中的长连接与短连接

长连接：客户端向服务端发请求建立连接，一旦建立成功，客户端就可以像服务端发送请求数据，服务端接收并且处理，返回响应后连接不断开。

优点：实现实时通信。客户端服务端随时随地向对方发消息。

短连接：客户端向服务端发请求建立连接，一旦建立成功，客户端就可以像服务端发送请求数据，服务端接收并且处理，返回响应后连接立即断开。若想重新发送请求，则需要重新建立连接。

优点：节省服务端资源。

如何使用代码建立客户端与服务端之间的websocket连接并实现通信？

socket.io

socket.io是一个为浏览器与服务端之间提供实时、双向、基于事件通信的网络通信库（框架）。基于websocket协议提供了相关的API，方便的实现客户端与服务端之间的长连接通信。

建立websocket连接

服务端

1. 新建nodejs项目目录。 socketserver

2. 初始化npm项目，安装socket.io模块。

   npm init    # 将会生成package.json
   npm install --save socket.io
   

3. 编写index.js（这个你自己起名app.js啥都行），在代码中通过socket.io接收客户端建立连接的请求。

// 主js脚本： index.js
// 创建一个http服务器 用于监听端口 接收请求
const http = require('http').createServer()
// 加载socket.io模块，获取socketio对象
// 用于处理接收客户端的websocket连接（它需要http服务器）
const socketio = require('socket.io')(http,{
  cors: {
    origin: '*'
  }
})
// 通过socketio监听客户端发过来的建立websocket连接请求
// 一旦连接成功，将会立即执行回调方法，并且传入与该客户端通信
// 所需要的socket对象
socketio.on('connection', function(socket){
  console.log('有客户端进来了：'+socket.id)
})
// 启动http服务器，监听3000端口
http.listen(3000, ()=>{ console.log('服务器已启动..') })

       客户端

1. 新建html网页。通过script标签引入socket.io.js。
2. 通过socket.io.js向服务端发请求建立websocket长连接：

<script>
	let socket = io('http://localhost:3000/')
    // socket用于与服务端通信
</script>

实现webSocket通信可以简单理解为三个方面

1. 客户端向服务端发消息
2. 服务端向客户端发消息
3. 服务端向所有客户端发消息（你可以理解为群发）

下面写一个小小的示例，相信这样大家就明白啦

客户端向服务端发消息

客户端发消息

<script>
	let socket = io('http://localhost:3000/')
    // 发消息(消息类型, 消息内容)
    socket.emit('textmsg', '你瞅啥？')
</script>

服务端接收

  socketio.on('connection', function(socket){
    // 监听并接收textmsg类型的消息
    socket.on('textmsg', function(data){
        console.log(data)
    })
})

服务端向客户端发消息

服务端发消息

   socketio.on('connection', function(socket){
    socket.emit('textmsg', '消息内容')
})

客户端接收

  let socket = io('http://localhost:3000/')
socket.on('textmsg', function(data){
    console.log(data)
})

服务端向所有客户端广播消息

socketio.on('connection', function(socket){
    socketio.emit('textmsg', '消息内容')
})

相信现在大家明白不少了，如果还有不了解的可以私聊我，想知道什么私聊我也行，评论也行，希望可以帮到大家，一点点小见解。现在总结一下简单的命令

socket.emit()   //这是传输,里面要有两个参数,("起的名字","值")
scoket.on()  //这是接收,里面要有两个参数,("起的名字",函数(要让他做什么))
socketio.emit()  //全体发消息