简介

一种通信协议。与http协议不同的是，支持服务器主动向客户端发送内容。

支持html5的浏览器，也默认支持websocket。

创建

let ws = new WebSocket(url);  // ws://ip地址:端口号/资源名称

支持的方法

方法	格式	说明
open	ws.onopen	连接建立时触发
message	ws.onmessage	客户端接收服务端数据时触发
error	ws.onerror	通信发生错误时触发
close	ws.onclose	连接关闭时触发
send	ws.send	使用连接发送数据

后端实现

安装

npm i ws

创建

const WebSocket = require("ws");
const wss = new WebSocket.Server({
  port: 8008
})

监听事件

// 连接事件，即有客户连入
wss.on("connection", client=>{
  console.log("有客户端连入...");
});

// 接收数据
wss.on("connection",client=>{
  client.on("message", msg=>{
    console.log("有数据传来")
  });
});

// 主动传给客户端
client.send("hello socket");

// 想全部遍历在线的连接可以用下面这句wss.clients.forEach()
// wss.clients.forEach(client=>{
//   client.send("内容");
// })

前端实现

let connect = document.querySelector("#connect"); // 假设html中有id为connect的按钮
let send = document.querySelector("#send");// 假设html中有id为send的按钮
let recv = document.querySelector("#recv");// 假设html中有id为recv的按钮
connect.onclick = function(){
  ws = new WebSocket("ws://localhost:8098");
  ws.onopen = () => {
    console.log("连接成功")
  }
  ws.onclose = () => {
    console.log("连接失败")
  }

  ws.onmessage = msg => {
    console.log("接收数据:");
    recv.innerHTML = msg.data;
  }
}

send.onclick = function(){
  ws.send("前端消息")
}