前言
入门 WebSocket
后端 Springboot
前端 HTML5 (原生方法)
简单介绍下WebSocket,是类似于HTTP的基于TCP连接协议,相比于HTTP是单次单向传输的短连接,WebSocket是多次双向传输的长连接,更适合用于游戏、聊天室等有实时监听的需求
本来是设想直接用H5,其中的一个房主作为主机,就可以省去服务端,但考虑到可能存在公网ip变动、端口不开放、防火墙等问题,决定放弃该方案
所以本文还是使用主流方案实现前后端websocket交互,即所有用户与服务器端建立连接,服务器端代理实现用户端所有请求和响应
折腾
Java SpringBoot端
新建一个空的SpringBoot项目
我这里选择 JDK8 + maven + war包 (可以根据需要自行选择)
(过程省略)
修改访问端口
application.yml
增加maven依赖
(这里如果只提供socket接口,可以把不需要的去掉,例如web依赖可以不要,只保留websocket)
pom.xml
新建 websocket配置
WebSocketConfig.java
新建 websocket接口
TestSocket.java
前端html代码 (需要放在容器里才能执行,本地执行无法请求接口,我这里用webstorm编辑和执行,也可以用vscode)
服务端大致目录如下
效果展示
首先我这里打开3个页面模拟3个用户,分别输入昵称 user1
user2
user3
分别都可以看到已连接 说明连接websocket正常
在user1 中输入666并点击发送
在user2 和 user3可以看到效果
截图如下
user1
user2
user3
END
后续打算写几个能联机的多人游戏玩一玩
当其中一个人进行操作,就可以用ws实时同步到其他玩家的界面
包括实时的多人在线聊天也可以用这个实现
用户本地缓存数据用 localStorage
还可以实现断线重连
最终代码
https://gitee.com/tczmh/ws-java
https://gitee.com/tczmh/websocket-html
参考
https://www.cnblogs.com/xuwenjin/p/12664650.html