WebSocket介绍

作用 WebSocket是一种在单个TCP连接上进行全双工通信的协议。
功能 WebSocket使得客户端和服务器之间的数据交换变得更加简单
除此之外我们还有其他一些方法(纯前端js实现)
1 长轮询 前端使用ajax进行接口数据的查询(持续不断的查询)
如果读取到服务器上边有最新的数据 立马返回给前端
缺点：内存消耗太大 对服务器不友好
优点：服务器一旦有最新 立马返回
2 短轮询 每隔固定的时间请求一次 例如每个一个小时
请求一次服务器 如果读取到服务器上边有最新的数据 立马返回给前端
优点：内存消耗不大
缺点：不能快速实时的讲服务器上边最新的消息给你立马返回
websocket中
使用onopen连接websocket服务
使用onmessage监听websocekt服务器返回数据
使用send发送数据给websocket服务器

使用socket.io实现websocket双向通信

我们在开发项目过程中为了更加方便的进行socket调用 我们自己可以创建一个服务
这个时候我们需要安装引入socket.io 1 使用npm 安装下载socket.io 服务端使用
npm i socket.io
2 可以直接引入socket.io.js文件 客户端使用
socket.io分为客户端和服务端
引入socket.io.js这是一个客户端脚本
现在我们还需要一个服务端的io
步骤：
1 在页面中需要引入socket.io.js文件
2 需要使用nodejs创建一个socket服务 首先使用npm安装socket.io安装包
npm i socket.io —save-dev
创建server.js文件 const http=require(“http”).createServer();
const io=require(“socket.io”)(http);
io.on(‘connection’, (socket)=> { // 创建socket连接
console.log(‘a user connected’)
socket.on(‘send’, function(e) {
console.log(1111,e)
io.sockets.emit(‘recive’,e)
})
socket.on(‘reply’, function(e) {
console.log(2222,e)
io.sockets.emit(‘recive1’,e)
})
})
http.listen(3000, ()=> { // 端口号可以自定义
console.log(‘listening on 3000’)
})

我们可以使用socket.on(“自定义名称”) 来监听客户端发送数据
使用socket.emit(“自定义名称”, 要发送的数据) 来将数据发送给服务器
emit和on里边自定义名称需要一致 这个时候才能实现一个发送 一个监听
我们可以使用io.sockets.emit向所有的用户广播数据
3 启动服务 node server.js
4 在客户端页面中可以使用 var socket=io(“http://localhost:3000“);
使用socket.on(“自定义名称”,function(e) {
// e对应就是接受的数据
}) 来进行数据的接收
使用 socket.emit(“自定义名称”,要发送的数据)向socket服务器发送数据

通过nodejs搭建环境

使用nodejs-websocket来实现双向通信
通过nodejs搭建环境
1 安装		 npm i nodejs-websocket —save-dev
2 创建server.js文件 并在文件中进行配置 var ws=require(“nodejs-websocket”)
var server = ws.createServer(function (conn) {
console.log(“New connection”)
conn.on(“text”, function (str) {
console.log(“Received “+str)
conn.sendText(str.toUpperCase()+”!!!”)
})
conn.on(“close”, function (code, reason) {
console.log(“Connection closed”)
})
}).listen(8001)
3 运行服务 node server.js

使用步骤

1.新建socket文件夹 npm init
2.安装socket.io npm i socket.io —save-dev
3.在socket中创建server.js文件
4.执行命令 node server.js 
  1.             <br />                 <br />