webSocket 实现小游戏

前言 一、为什么需要 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';
        }