websocket基础使用

demo演示

思考：这种网页版的聊天功能应该如何去实现？？

websocket介绍

WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。

websocket是一种持久协议，http是非持久协议

现在很多网站都有实时推送的需求，比如聊天，客服咨询等

早期没有websocket时，通过ajax轮询，由于http请求，服务器无法给浏览器主动发送数据，因此需要浏览器定时的给服务器发送请求（比如1s一次）,服务器把最新的数据响应给浏览器。这种模式的缺点就是浪费性能和资源。

websocket是一种网络协议，允许客户端和服务端全双工的进行网络通讯，服务器可以给客户端发消息，客户端也可以给服务器发消息。

websocket基本使用

在HTML5中，浏览器已经实现了websocket的API，直接使用即可。

WebSocket-MDN

创建websocket对象

// 参数1： url：连接的websocket属性
// 参数2： protocol，可选的，指定连接的协议
// var socket = new WebSocket('ws://echo.websocket.org')
var Socket = new WebSocket(url, [protocol] );

websocket事件

事件	事件处理程序	描述
open	Socket.onopen	连接建立时触发
message	Socket.onmessage	客户端接收服务端数据时触发
error	Socket.onerror	通信发生错误时触发
close	Socket.onclose	连接关闭时触发

websocket方法

方法	描述
Socket.send()	使用连接发送数据
Socket.close()	关闭连接

使用nodejs开发websocket服务

我们刚刚使用了官网提供的echo服务，接下来我们自己通过nodejs实现一个简单的websocket服务。

使用nodejs开发websocket需要依赖一个第三方包。Nodejs Websocket

项目搭建

新建一个websocket server端的项目

mkdir server-demo
cd server-demo
yarn init -y
yarn add nodejs-websocket
touch app.js

开发服务程序

在app.js中

// 导入第三方模块
const ws = require('nodejs-websocket')
// websocket占用的端口号
const PORT = 3000

const server = ws.createServer(connect => {
   
  console.log('新的连接')

  // 接收到客户端的文本内容时触发
  connect.on('text', str => {
   
    console.log('接收:' + str)
    // 把接收到的字符串转换成大写，并且给客户端响应
    connect.sendText(str.toUpperCase() + '!!!!')
  })

  // 监听关闭事件
  connect.on('close', () => {
   
    console.log