10-vue移动端项目(websocket的简单案例与创建一个聊天室)

WebSocket

01- 什么是WebSocket

它与 http 协议一样，也是一种通讯协议

http 协议：

• 作用：规范浏览器与服务器交互的一种标准。
• 特点：
  • 每次浏览器与服务器之间进行交互都需要重复开启和断开连接
  • 请求只能由浏览器主动发送，服务器被动响应
    
• 总结：
  • 由于以上两个特点，让 http 协议在某些场合下不适用。比如说：实时聊天。

websocket 协议：

它的最大特点就是，服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息，是真正的双向平等对话

• 作用：一种通讯协议
• 特点：
  • 一旦浏览器与服务器建立连接之后，不会轻易断开
  • 交互可以由服务器主动发起，也可以由浏览器主动发起
• 总结：
  • 由于 websocket 的两个特点，它非常适合用来完成实时聊天

02 - 基本使用

socket.io网站示例传送门

总结： websocket 的运行流程

• 1）需要一个服务器
• 2）需要一个客户端（浏览器）
• 3）由客户端连接服务器
• 4）服务器端响应连接成功的状态
• 5）由客户端向服务器发送消息
• 6）服务器接收消息
• 7）服务器响应消息到客户端
• 8）客户端接收消息
• 9）关闭连接

03 - 简单的客户端演示：

这里是一个简单的客户端显示，所以服务器是人家已经建好的

     // 创建一个websocket实例
        // 由客户端与服务器建立连接
        var ws = new WebSocket("wss://echo.websocket.org")
        // 客户端建立连接成功后的回调函数
        ws.onopen = function (evt) {
   
   
            console.log('连接成功...')
            //   连接成功后客户端发送消息给服务器
            ws.send('hellow! websocket')
        }
        // 客户端成功接收服务器响应的消息执行的回调函数
        ws.onmessage = function (evt) {
   
   
            console.log('服务器响应回来的消息是' + evt.data)
            // 关闭连接
            ws.close()
        }
        // 关闭连接成功后的回调函数
        ws.onclose = function () {
   
   
            console.log('关闭成功')
        }

04 - 完成一个聊天室

使用一个基于 websocket 的第三方包 socket.io 来完成聊天室

服务器

客户端

demo传送门

步骤：

• 1.0 创建一个服务器
  • 创建一个文件夹
  • 初始化这个项目： npm init -y
  • 下载 express
  • 使用 express 来开启服务器
• 2.0 创建一个客户端
  • 在项目中创建一个文件夹：view
  • 在文件夹中创建一个静态页面 index.html
  • 在 index.html 完成聊天的结构
  • 在请求根目录时，将这个 html 页面响应浏览器，当作客户端
• 3.0 在服务器中开启 websocket