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

webSocket 实现小游戏相关推荐

unity开发微信小游戏（5）- 微信好友排行榜
效果展示: 如果感觉文章有用的,也烦请大家多多支持(扫描上面二维码n(*≧▽≦*)n)!!❤❤❤ unity开发微信好友排行榜可以说是把我虐的体无完肤,但为了拿下这功能,硬壳了三天,把我所踩过的坑分享 ...
canvas+websocket+vue做一个完整的你画我猜小游戏
第一次在掘金发文章,瑟瑟发抖. 这个主要是为了学习使用一下canvas和websocket,项目地址.求star- 你画我猜大家应该都玩过,一个人画,其他人猜.目前实现了最基本的功能,慢慢修改. 项目 ...
Laya微信小游戏websocket支持wss本地测试方法及上线解决方案
原来的微信小游戏开发过程中用的websocket,支持ws,现在微信小游戏准备上线,但是微信后台服务器域名要求是wss的,当时居然天真的以为把客户端联网脚本里的服务器地址在原有基础上改成wss就行,结 ...
微信小游戏开发Canvas资源汇总
Demo: 微信小程序demo组件:股票分时图微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成微信小程序学习用完整dem ...
微信小游戏背后的技术优化
作者:chrongzhang,腾讯 WXG 客户端开发工程师这是一篇介绍微信小游戏客户端底层,如果进行优化,可以让所有小游戏获得更好性能的文章.不是你想像的怎么优化某个小游戏的文章.来都来了,就了解 ...
如何不用服务器来开发一个小游戏
我是代长新,来自上海享物说,主要负责游戏客户端研发. 享物说是一个大家可以互相赠送物品,有趣.不花钱的社区平台.为了创造更好的社区氛围,我们决定通过小游戏来增加社区的趣味性和互动性. <乐享花园 ...
想开发微信小游戏，先看看腾讯是如何制定规则的
点击上方"CSDN",选择"置顶公众号" 关键时刻,第一时间送达! 作者 | 凌华彬.王哲责编 | 徐威龙一.前言在第一篇文章<微信小游戏开发上手& ...
你踩过几个？盘点微信H5小游戏开发中的那些坑
眼下小游戏特别火,不少团队也陆续启动了微信小游戏的项目,并于立项前期进行技术预研究.但从微信官方文档看 , 却能发现不少坑. 一.运行环境的坑首先微信小游戏是一个不同于浏览器的 JavaScript ...
CocosCreator 微信小游戏、Android 和 iOS 使用 protobuf
protobuf 的介绍这里就不在讲述.本文介绍使用的是 decodeio不是google-protobuf.使用的版本是v6.10.2 mac环境完成该功能参考了一下文章: https://blo ...

webSocket 实现小游戏

前言一、为什么需要 WebSocket？

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

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

2.前端连接后台的webSocket 进行通信

webSocket 实现小游戏相关推荐

最新文章

热门文章

webSocket 实现小游戏

前言 一、为什么需要 WebSocket？

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

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

2.前端连接后台的webSocket 进行通信

webSocket 实现小游戏相关推荐

最新文章

热门文章

前言一、为什么需要 WebSocket？