HTML5 新特性 - WebSocket

websocket可以实现客户端与服务端的数据的实时通信. (长连接)

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

        短连接模式:

        客户端请求服务端建立连接, 一旦连接建立成功,客户端向服务端发送请求数据包, 服务端接收请求数据包后, 执行业务返回响应数据包, 最后连接断开.

        优点: 节省服务端资源.

        长连接模式:

        客户端请求服务端建立连接, 一旦连接建立成功, 客户端将会随时向服务端发数据, 服务端也会随时向客户端发数据. 在这个通信过程中连接始终不断开.

        优点: 连接始终不断开, 可以实现实时通信.

        HTTP协议是一款基于短连接的协议

如何使用代码建立网页与服务器之间的websocket连接并实现通信?

   socket.io是一个为浏览器与服务器之间提供实时的/双向的/基于事件通信的网络通信库。它实现了websocket协议，提供了简单的API， 抹平了一些技术细节与浏览器兼容性问题.

// 客户端   index.html 中
// 导入 socket.io.js     
io('ws://ip:port/')  // 请求建立连接

// 服务端  nodejs中
// 引入socketio模块
socketio.on('connection', function(){
    // 连接成功
})

建立websocket连接

服务端：

1. 新建服务端项目目录: socketserver

2. 安装模块: socket.io.

   # 先进入server目录  执行命令
   cd server
   npm init
   # 一路回车即可  初始化完毕后将会新增package.json
   npm install --save socket.io

3. 新建index.js文件, 在该文件中引入socketio模块, 监听客户端连接.

// index.js
// 创建http服务  用于监听端口   接收客户端连接请求
const http = require('http').createServer()
// 创建socketio实例   socketio依赖于http服务
// 需要借助http服务, 才可以接收客户端发来的建立websocket连接的请求
const socketio = require('socket.io')(http, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
})
// 基于socketio 监听客户端的websocket连接事件 connection
socketio.on('connection', (socket)=>{
  // websocket连接建立成功后, 将会自动调用该回调方法, 并且
  // 传入与客户端交互所需要使用的socket对象
  console.log('有客户端连进来了:'+socket.id)
})


http.listen(3000, ()=>{
  console.log('server is Running...')
})

客户端：

1. 新建html页面. 01_socket.html

2. 引入socket.io.js 建立连接.

   <script src="./socket.io.js"></script>
   <script>
       // 向ip:port的位置发送建立websocket连接的请求
       // 连接建立成功后将会返回与服务端交互所需要的socket对象
       let socket = io('ws://127.0.0.1:3000/')
   </script>

客户端与服务端之间的通信

客户端向服务端发消息

        客户端发送消息：

let socket = io('ws://127.0.0.1:3000/')
// emit为发送消息：  （消息类型， 消息内容）
socket.emit('textmsg', 'hello!')

        服务端接收消息 ：

socketio.on('connection', (socket)=>{
    socket.on('textmsg', (data)=>{
        console.log(data)
    })
})

服务端向客户端发消息

        服务端发消息：

socketio.on('connection', (socket)=>{
    socket.emit('textmsg', '瞅你丑..')
})

        客户端接收消息 ​​​​​​​：

let socket = io('ws://127.0.0.1:3000/')// 监听服务端发过来的消息
socket.on('textmsg', (data)=>{    
    console.log(data)
})

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

        一旦服务端向所有客户端广播消息， 那么所有的客户端都将会同时接收到该服务端发回来的消息， 每个客户端各自处理.

socketio.on('connection', (socket)=>{    // 向所有客户端广播消息    
    socketio.emit('textmsg', '大家好, 我是xxx')
})