webSocket 实现小游戏_小满zs_websocket 游戏

irpas 02-07 7989

前言一、为什么需要 WebSocket？

初次接触 WebSocket 的人，都会问同样的问题：我们已经有了 HTTP 协议，为什么还需要另一个协议？它能带来什么好处？

答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。可以看图

举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。

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

?webSocket协议通常是ws和wss

客户端API

1.webSocket为构造函数使用的时候需要new操作符

new WebSocket

2. readyState 状态

CONNECTING：值为0，表示正在连接。OPEN：值为1，表示连接成功，可以通信了。CLOSING：值为2，表示连接正在关闭。CLOSED：值为3，表示连接已经关闭，或者打开连接失败。

3.onopen

用于指定连接成功后的回调函数

4.onclose

用于指定连接关闭后的回调函数

5.onmessage

用于指定收到服务器数据后的回调函数

6.send

方法用于向服务器发送数据

1.nodejs 通过express-ws 连接和发送给前端数据

服务端API 介绍

框架主要是express 后端长连接用的是express-ws

getWss 返回当前的连接池?

const express = require('express') const app = express() const ws = require('express-ws') const wss = ws(app).getWss('/talk') app.ws('/talk', (ws, req) => { //console.log('success',ws) ws.on('message', msg => { wss.clients.forEach(w=>{ w.send(msg) }) }) }) app.listen(9001, () => { console.log('http://localhost:9001/talk') }) 2.前端连接后台的webSocket 进行通信 const type = prompt('请输入1位红方阵营，2位蓝色方') let ws = new WebSocket('ws://localhost:9001/talk') let wrpas = document.querySelectorAll('.wraps div'); ws.onopen = () => { console.log('成功') } wrpas.forEach((item, index) => { item.onclick = function () { ws.send(JSON.stringify({ index, type })) } }) ws.onmessage = ({ data }) => { let options = JSON.parse(data) wrpas[options.index].style.background = options.type == 1 ? 'red' : 'blue'; }