WebSocket的使用方法（JS前端）
Posted 最凶残的小海豹
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WebSocket的使用方法（JS前端）相关的知识，希望对你有一定的参考价值。
先来一个常用例子
// WebSocket构造函数，创建WebSocket对象
let ws = new WebSocket('ws://localhost:8888')
// 连接成功后的回调函数
ws.onopen = function (params)
console.log('客户端连接成功')
// 向服务器发送消息
ws.send('hello')
;
// 从服务器接受到信息时的回调函数
ws.onmessage = function (e)
console.log('收到服务器响应', e.data)
;
// 连接关闭后的回调函数
ws.onclose = function(evt)
console.log("关闭客户端连接");
;
// 连接失败后的回调函数
ws.onerror = function (evt)
console.log("连接失败了");
;
下面详细说明常用的属性和方法
更全面的官网的文档可以去这里看：点击查看
下面是我总结的内容
WebSocket
WebSocket 对象提供了用于创建和管理 WebSocket 连接，以及可以通过该连接发送和接收数据的 API。
var ws= new WebSocket(url, protocols);
参数
url：要连接的 URL；这应该是 WebSocket 服务器将响应的 URL。
protocols（可选）：一个协议字符串或者一个包含协议字符串的数组。这些字符串用于指定子协议，这样单个服务器可以实现多个 WebSocket 子协议（可以通过一台服务器根据指定的协议（protocol）处理不同类型的交互）。如果不指定协议字符串，则假定为空字符串。
属性
1. readyState 属性返回实例对象的当前状态
CONNECTING：值为0，表示正在连接。
OPEN：值为1，表示连接成功，可以通信。
CLOSING：值为2，表示连接正在关闭。
CLOSED：值为3，表示连接已经关闭，或者打开连接失败。
示例
switch (ws.readyState)
case WebSocket.CONNECTING: // 也可以用0
// do something
break;
case WebSocket.OPEN: // 也可以用1
// do something
break;
case WebSocket.CLOSING: // 也可以用2
// do something
break;
case WebSocket.CLOSED: // 也可以用3
// do something
break;
default:
// this never happens
break;
2. onopen 连接成功后的回调函数
当WebSocket 的连接状态readyState 变为1时调用，这意味着当前连接已经准备好发送和接受数据。
使用方法
ws.onopen = function ()
ws.send('Hello Server!');
或者
ws.addEventListener('open', function (event)
ws.send('Hello Server!');
);
3. onmessage 从服务器接受到信息时的回调函数
message 事件会在 WebSocket 接收到新消息时被触发
使用方法
ws.onmessage = function(event)
// 接收到的数据
var data = event.data;
// 其他代码
;
或者
ws.addEventListener("message", function(event)
// 接收到的数据
var data = event.data;
// 其他代码
);
注意：服务器推送的数据可能有多种格式，需要我们动态判断，也可以通过 binaryType 属性设置
判断 / 设置 数据格式
// 判断
ws.onmessage = function(event)
if(typeof event.data === String)
console.log("返回数据是字符串");
// binaryType 属性设置
ws.binaryType = "arraybuffer";
ws.onmessage = function(e)
// 收到的是 ArrayBuffer 数据
console.log(e.data.byteLength);
;
4. onclose 连接关闭后的回调函数
onclose 在 WebSocket 连接的readyState 变为 CLOSED或3时被调用，它接收一个名字为close的 CloseEvent 事件
使用方法
ws.onclose = function(event)
var code = event.code; // 表示服务端发送的关闭码
var reason = event.reason; // 表示服务器关闭连接的原因
var wasClean = event.wasClean; // 表示连接是否完全关闭
// 其他代码
;
或者
ws.addEventListener("close", function(event)
var code = event.code; // 表示服务端发送的关闭码
var reason = event.reason; // 表示服务器关闭连接的原因
var wasClean = event.wasClean; // 表示连接是否完全关闭
// 其他代码
);
关闭码对照表：点击查看
5. onerror 连接失败后的回调函数
当websocket的连接由于一些错误事件的发生 (例如无法发送一些数据) 而被关闭时，一个error事件将被引发。
使用方法
ws.onerror = function(event)
console.log('连接错误: ', event);
;
或者
ws.addEventListener('error', function (event)
console.log('连接错误: ', event);
);
6. bufferedAmount 未发送至服务器的字节数
bufferedAmount是一个只读属性，用于返回已经被send()方法放入队列中但还没有被发送到网络中的数据的字节数。一旦队列中的所有数据被发送至网络，则该属性值将被重置为 0。但是，若在发送过程中连接被关闭，则属性值不会重置为 0。如果你不断地调用send()，则该属性值会持续增长。
使用方法
// 创建数据
var data = new ArrayBuffer(10000000);
// 发送数据
ws.send(data);
// 判断数据是否
if (socket.bufferedAmount === 0)
// 数据发送完成
else
// 还有数据未发送完成
方法
1. send() 对要传输的数据进行排队
send() 方法将需要通过 WebSocket 链接传输至服务器的数据排入队列，并根据所需要传输的 data bytes 的大小来增加 bufferedAmount 的值。若数据无法传输（例如数据需要缓存而缓冲区已满）时，套接字会自行关闭。
使用方法
ws.send('your message');
注意：用于传输至服务器的数据。它必须是以下类型之一：
USVString：文本字符串。字符串将以 UTF-8 格式添加到缓冲区，并且 bufferedAmount 将加上该字符串以 UTF-8 格式编码时的字节数的值。
ArrayBuffer：您可以使用一有类型的数组对象发送底层二进制数据；其二进制数据内存将被缓存于缓冲区，bufferedAmount 将加上所需字节数的值。
Blob：Blob 类型将队列 blob 中的原始数据以二进制中传输。 bufferedAmount 将加上原始数据的字节数的值。
ArrayBufferView：您可以以二进制帧的形式发送任何 javascript 类数组对象 ；其二进制数据内容将被队列于缓冲区中。值 bufferedAmount 将加上必要字节数的值。
2. close() 关闭当前链接
close() 方法关闭 WebSocket 连接或连接尝试（如果有的话）。如果连接已经关闭，则此方法不执行任何操作。
使用方法
// WebSocket.close(code, reason)
ws.close();
参数：
code（可选）：一个数字状态码，它解释了连接关闭的原因。如果没有传这个参数，默认使用 1005。
reason（可选）：一个人类可读的字符串，它解释了连接关闭的原因。这个 UTF-8 编码的字符串不能超过 123 个字节。
数字状态码对照表：点击查看
到这里就结束了，根据需求使用就可以了。
前端开发趣味之五子棋小游戏（JS+Node+Websocket）可分房间对战
主要通过js、canvas、node、websocket来实现五子棋游戏。
tip:如果你想清除的了解怎么实现，请一步步看思路流程。
首先搭建一个express服务：
const express = require('express')
const path = require('path')
const app = express()
//静态资源目录
app.use(express.static(path.join(__dirname, 'public')));
let port = 3003
app.get('/home', (req, res, next) => {
res.writeHead(200, { 'Content-type': 'text/html;charset=utf-8' })
res.end('欢迎来到express')
next()
})
const server = app.listen(port, () => { console.log('成功启动express服务,端口号是' + port) })
这个时候我们可以访问静态文件里面的文件了，如：
public下面的index.html在访问3003/的时候在浏览器渲染。
这也说明了我们的node服务启动成功，接口在3003端口上。
前端页面，里面包括css\\html但是不包括js，只是引入js文件：
<!-- 2021/5/15 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/jpg" href="./ipc.jpg">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>五子棋</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
canvas {
margin-top: 200px;
margin-left: 300px;
background-color: rgb(213, 176, 146);
display: inline-block;
border-radius: 8px;
border: 1px solid black;
}
.resultBox {
position: absolute;
text-align: center;
top: 200px;
left: 760px;
width: 200px;
height: 450px;
/* background-color: #ccc; */
background-color: rgb(213, 176, 146);
color: 38px;
line-height: 60px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="box">
<canvas id="canvas"></canvas>
<div class="resultBox">
<p class="redP">白旗已下0</p>
<p class="blackP">黑旗已下0</p>
<p class="resultP"></p>
</div>
</div>
<!-- 通过script的方式引入 soctke.io -->
<script defer crossorigin="anonymous"
integrity="sha512-PU5S6BA03fRv1Q5fpwXjg5nlRrgdoguZ74urFInkbABMCENyx5oP3hrDzYMMPh3qdLdknIvrGj3yqZ4JuU7Nag=="
src="https://lib.baomitu.com/socket.io/4.1.3/socket.io.js"></script>
//低版本 不再使用
<!-- <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script> -->
<script defer src="./wuziqi.js"></script>
</body>
</html>
1：生成棋盘
2：生成棋子
3：棋子落点
4：五子成线 ？赢 ：输
流程：
1.页面：渲染完成，输入房间号
2.选择白棋 、 黑棋
3.选择白棋后先下 黑棋有了白棋才能下
4.一方胜利，游戏结束。
页面加载后开始连接服务器。 控制台打印连接成功。输入房间号。
房间号里面只能容纳两个人，多余的人为观众，不可控制器盘的棋子
棋盘构造函数
//线条构造函数
//线条颜色 x y
function Line(color, x, y) {
this.color = color;
this.x = x
this.y = y
}
//画横线
Line.prototype.getXLine = function () {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(0, this.y);
ctx.lineTo(this.x, this.y);
ctx.strokeStyle = this.color;
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//画竖线
Line.prototype.getYLine = function () {
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(this.x, 0);
ctx.strokeStyle = this.color;
ctx.lineTo(this.x, this.y);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
//线条相隔大小 后面 num += flag
let num = 0
//线条随机颜色数组
// let colorsList = ["#33B5E5", "#0099CC", "#AA66CC", "#9933CC", "#99CC00", "#669900", "#FFBB33", "#FF8800", "#FF4444", "#CC0000"]
//循环画线
for (let i = 0; i <= canvas.width; i += flag) {
// let colorx = colorsList[Math.floor(Math.random() * 10)]
// let colory = colorsList[Math.floor(Math.random() * 10)]
let colorx, colory
colorx = colory = 'black'
getXLineArr.push(new Line(colorx, canvas.width, num))
getYLineArr.push(new Line(colory, num, canvas.width))
num += flag
}
//画横线
getXLineArr.map(item => {
item.getXLine()
})
//画竖线
getYLineArr.map(item => {
item.getYLine()
})
棋子构造函数
function Chessman(x, y, color) {
this.x = x
this.y = y
this.color = color
}
Chessman.prototype.update = function () {
ctx.save();
ctx.beginPath()
ctx.fillStyle = this.color// 背景颜色为白色
ctx.arc(this.x, this.y, 20, 0, Math.PI * 2, false)
ctx.fill()
ctx.closePath()
}
棋子落在棋盘
选择白棋 黑棋,每点击一次棋盘会进行判断是否是该你下棋子
//当前点击的坐标 相对于canvas的坐标
let arr = [e.clientX - MarginLeftNum, e.clientY - MarginTopNum]
//当前点击坐标到 棋盘 0，0 的距离
// let newArrLong = Math.sqrt((0 - arr[0]) * (0 - arr[0]) + (0 - arr[1]) * (0 - arr[1]))
//25
let newArrLong = flag / 2
newARR = []
//循环判断当前点击坐标到哪个棋盘坐标的距离最短，棋子放置到该坐标点
lineXAndlineYArr.map((item, index) => {
let newArrLongA = Math.sqrt((item[0] - arr[0]) * (item[0] - arr[0]) + (item[1] - arr[1]) * (item[1] - arr[1]))
if (newArrLongA <= newArrLong) {
newARR = item; newArrLong = newArrLongA
}
})
//看能不能落子
//白
if (redOrBlackFlag === 1) {
if (blackOrRedChessman % 2 !== 0) {
return false
}
console.log("%c当前点击棋子坐标：", "color:red;font-size:20px;", newARR)
} else {
//黑
if (blackOrRedChessman % 2 == 0) {
return false
}
console.log("%c当前点击棋子坐标：", "color:red;font-size:20px;", newARR)
}
随后查看该点是否已经有了棋子
//判断该点是否已经有棋子
let hasYesOrNo = JSON.stringify(hasChessmanArrList).includes(JSONstringify(newARR))
if (!hasYesOrNo) {
//没有的话加入棋子数组
hasChessmanArrList.push(newARR)
}
else {
alert('已经有棋子')
return
}
棋子落子后触发服务器棋子位子更新
//lineXAndlineYArrRed 白棋
//lineXAndlineYArrBlack 黑棋
//lineXAndlineYArrBlack 黑棋
//blackOrRedChessman 棋子数量
const sendItemsArr = JSON.stringify({ lineXAndlineYArrRed, lineXAndlineYArrBlack, hasChessmanArrList, blackOrRedChessman })
mySocket.emit('sendItemsArr', sendItemsArr)
服务器派发另一个人更新棋子位置
websocketObj.on('sendItemsArr', (sendItemsArr) => {
itemsArr = sendItemsArr
//触发所以的 sendFunEventCallBack 事件 让前端监听
io.sockets.emit("getItemsArr", itemsArr);
})
前端接受最新的棋子位置：
//websocket
mySocket.on('getItemsArr', (getItemsArr) => {
const ItemsArr = JSON.parse(getItemsArr)
lineXAndlineYArrRed = ItemsArr.lineXAndlineYArrRed
lineXAndlineYArrBlack = ItemsArr.lineXAndlineYArrBlack
hasChessmanArrList = ItemsArr.hasChessmanArrList
blackOrRedChessman = ++ItemsArr.blackOrRedChessman
// 判断这次点击棋子颜色
//生成棋子 放置棋盘中
lineXAndlineYArrRed.map(i => {
new Chessman(i[0], i[1], color1).update()
})
lineXAndlineYArrBlack.map(i => {
new Chessman(i[0], i[1], color2).update()
})
//改变页面上的信息
redP.innerHTML = '白旗已下' + lineXAndlineYArrRed.length
blackP.innerHTML = '黑旗已下' + lineXAndlineYArrBlack.length
})
再而判断下的这枚棋子，白棋或者黑棋棋子是否已经有了五个：
//判断棋子数量是否已经大于5 没到5 决对赢不了的 ~
if (newlineXAndlineYArr.length >= 5) {
//向右向左倾斜判断、横向纵向判断
leftRightFangXiang()
// //向右倾斜
function leftRightFangXiang() {
// 深拷贝一份数据
let newlineXAndlineYArrR = JSON.parse(JSON.stringify(newlineXAndlineYArr))
let newRightArrList = []
for (let i = 0; i < 5; i++) {
//x
if (1) {
newRightArrList = []
for (let j = 0; j < i; j++) {
newRightArrList.push([newARR[0] - flag * (j + 1), newARR[1]])
}
for (let k = i; k < 4; k++) {
newRightArrList.push([newARR[0] + flag * (k - i + 1), newARR[1]])
}
if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
console.log("%c横向赢了哦~", "color:red;font-size:30px;");
break
}
}
//y
if (1) {
newRightArrList = []
for (let j = 0; j < i; j++) {
newRightArrList.push([newARR[0], newARR[1] - flag * (j + 1)])
}
for (let k = i; k < 4; k++) {
newRightArrList.push([newARR[0], newARR[1] + flag * (k - i + 1)])
}
if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
console.log("%c纵向赢了哦~", "color:red;font-size:30px;");
break
}
}
// //左下 // 前 + - 张俊卿 - +
if (1) {
newRightArrList = []
for (let j = 0; j < i; j++) {
newRightArrList.push([newARR[0] + flag * (j + 1), newARR[1] - flag * (j + 1)])
}
for (let k = i; k < 4; k++) {
newRightArrList.push([newARR[0] - flag * (k - i + 1), newARR[1] + flag * (k - i + 1)])
}
if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win') {
console.log("%c左下赢了哦~", "color:red;font-size:30px;");
break
}
}
//右下 // 前 - - 张俊卿 + + 后
if (1) {
newRightArrList = []
for (let j = 0; j < i; j++) {
newRightArrList.push([newARR[0] - flag * (j + 1), newARR[1] - flag * (j + 1)])
}
for (let k = i; k < 4; k++) {
newRightArrList.push([newARR[0] + flag * (k - i + 1), newARR[1] + flag * (k - i + 1)])
}
if (rightOrRight(newRightArrList, newlineXAndlineYArrR, newARR) == 'win'以上是关于WebSocket的使用方法（JS前端）的主要内容，如果未能解决你的问题，请参考以下文章