目录：

游戏王联机卡牌对战 1 - 前言
游戏王联机卡牌对战 2 - 联机模式
游戏王联机卡牌对战 3 - 界面布局
游戏王联机卡牌对战 4 - 卡组系统
游戏王联机卡牌对战 5 - 卡片选中系统
游戏王联机卡牌对战 6 - 卡片放置，战场更新
游戏王联机卡牌对战 7 - 墓地，副控制面板
游戏王联机卡牌对战 8 - 返回手卡，牌组
游戏王联机卡牌对战 9 - 实现简单websocket通信
游戏王联机卡牌对战10 - 搭建游戏服务端
游戏王联机卡牌对战11 - 客户端消息的收发
游戏王联机卡牌对战12 - 消息发送具体场景
游戏王联机卡牌对战13 - 实机演示

实现简单 websocket 通信

1. WebSocket 简介：

有关 websocket 的简介，不了解 websocket 的朋友可以参考下CSDN大佬的这篇博文（侵删）：

websocket 学习，简单应用 - @广积粮缓称王

这篇博文详细地介绍了 websocket 的工作原理和简单应用，并且还有几个非常简洁实用的案例。

2. 搭建简易WebSocket服务端：

我们在这里也实现一个简单的WebSocket服务端与客户端，方便后面介绍。

首先我们需要下载并安装node.js：

搜索node.js，官网下载，有稳定版本和最新版本，一般用稳定版本，安装跟着提示走就行。

安装好后打开命令提示符cmd，输入node，执行出现版本号就表示成功安装了：

接下来开始搭建简易服务端。

随意建立一个项目文件夹，之后在该文件夹下运行命令窗口（或者cd到该文件夹），并输入命令 npm install ws 来安装 websocket 依赖包，安装后项目目录下会生成一个文件夹 node_modules 与一个 json 文件：

之后我们创建作为服务端的 js 文件，命名为 server.js，先贴下代码：

//引入websocket ws模块
var WebSocketServer = require('ws').Server,//初始化websocket
wss = new WebSocketServer({ port: 9999 });wss.on('connection', function (ws) {console.log('client connected');ws.on('message', function (message) {console.log(message);if(message == 'client1_msg') {ws.send("收到client1");} else {ws.send("收到client2");}});//SIGINT这个信号是系统默认信号，代表信号中断，就是ctrl+cprocess.on('SIGINT', function () {console.log("Closing things");process.exit();});});

当有客户端初次与服务端建立连接时，触发 wss.on，服务端会打印“client connected”。当服务端接收到客户端发来的消息时，触发 ws.on，会打印出客户端发送的消息内容并且向客户端返回一个消息表示收到信息。

接下来是客户端：
这里随意创建一个 html 文件 client1.html

<!DOCTYPE HTML>
<html><head><meta charset="utf-8"><title>websocket测试</title><script type="text/javascript">function WebSocketTest(){if ("WebSocket" in window){alert("您的浏览器支持 WebSocket!");// 初始化一个 WebSocket 对象，参数指明urlvar ws = new WebSocket("ws:localhost:9999");// WebSocket 连接时候触发ws.onopen = function(){//使用 send() 方法发送数据ws.send("client1_msg");alert("数据发送中...");};// 接收服务端数据时触发ws.onmessage = function (evt) { var received_msg = evt.data;console.log(received_msg);alert("数据已接收...");};//断开 web socket 连接成功触发事件ws.onclose = function(){ // 关闭 websocketalert("连接已关闭..."); };}else{// 浏览器不支持 WebSocketalert("您的浏览器不支持 WebSocket!");}}</script></head><body><div id="sse"><a href="javascript:WebSocketTest()">运行 WebSocket</a></div></body>
</html>

用浏览器打开客户端后即会向服务端发送连接请求，注意客户端与服务端的通信端口号要保持一致。由于我们的服务端创建在本地，故 WebSocket 对象的 url 参数是 localhost。

当客户端与服务端初次连接时，客户端会发送一条信息（“client1_msg”），当客户端接收到服务端返回的信息时，则会在控制台打印那条信息。

准备完毕，我们来试一试：

首先在项目文件夹运行命令窗口，并且输入node server.js 指令来运行服务端。

之后我们运行服务端 client1，用浏览器打开即可。我们可以看到服务端打印了客户端向其发送的信息，客户端也打印了服务端返回的信息。

这样一个简单的 websocket 客户端与服务端之间的通信模型就搭建好了。如果有多个用户，都是基于同样的原理与服务端之间通信，而用户与用户之间的交流则一般需要利用服务端做中介，处理并交换不同用户之间的信息。

下一章我们就把这个模型应用到游戏中，实现对战双方玩家之间的通信。

HTML+JS+websocket 实现联机“游戏王”对战（九）- 实现简单websocket通信相关推荐

HTML+JS+websocket 实现联机“游戏王”对战（十三）- 实机演示视频
最后一章啦,这章主要放个demo演示,然后讨论一些待改进的细节问题. 目录: 游戏王联机卡牌对战 1 - 前言游戏王联机卡牌对战 2 - 联机模式游戏王联机卡牌对战 3 - 界面布局游戏王联机卡 ...
HTML+JS+websocket 实现联机“游戏王”对战（一）
目录: 游戏王联机卡牌对战 1 - 前言游戏王联机卡牌对战 2 - 联机模式游戏王联机卡牌对战 3 - 界面布局游戏王联机卡牌对战 4 - 卡组系统游戏王联机卡牌对战 5 - 卡片选中系统游 ...
HTML+JS+websocket 实现联机“游戏王”对战（十）- 搭建游戏服务端
目录: 游戏王联机卡牌对战 1 - 前言游戏王联机卡牌对战 2 - 联机模式游戏王联机卡牌对战 3 - 界面布局游戏王联机卡牌对战 4 - 卡组系统游戏王联机卡牌对战 5 - 卡片选中系统游 ...
HTML+JS+websocket 实现联机“游戏王”对战（五）- 卡片选中系统
目录: 游戏王联机卡牌对战 1 - 前言游戏王联机卡牌对战 2 - 联机模式游戏王联机卡牌对战 3 - 界面布局游戏王联机卡牌对战 4 - 卡组系统游戏王联机卡牌对战 5 - 卡片选中系统游 ...
答题对战方案java_使用WebSocket实现实时多人答题对战游戏
前言前两章教程,我们使用WebSocket的基础特性打造了一个小小聊天室,并在第二章对其进行了集群化改造. 系列教程回顾: 在本文中,我将介绍如何使用WebSocket向实时多人答题对战游戏提供服务 ...
从零学习游戏服务器开发（一）从一款多人联机实时对战游戏开始
写在前面的话经常有学生或者初学者问我如何去阅读和学习一个开源软件的代码,也有不少朋友在工作岗位时面对前同事留下的项目,由于文档不完善.代码注释少.工程数量大,而无从下手.本文将来通过一个多人联机实时 ...
使用SpringBoot及Construct2的WebSocket制作联机游戏(二)
前情概要: 使用SpringBoot及Construct2的WebSocket制作联机游戏(一) 一.介绍: 1.SpringBoot服务端添加登录及注册接口,并进行Postman测试 2.Sprin ...
Unity(支持WebGL)+PHP(Workerman的Gateway)用Websocket协议实现匹配对战（摇骰子为例）2
Unity(支持WebGL)+PHP(Workerman的Gateway)用Websocket协议实现匹配对战(摇骰子为例)1 上篇文章只讲述工程使用.发布.并没讲述任何流程和实现原理.然而下面先讲述 ...
Unity(支持WebGL)+PHP(Workerman的Gateway)用Websocket协议实现匹配对战（摇骰子为例）1
文章目录服务端PHP(Windows下演示) 安装PHP 启动服务器结束服务器客户端Unity(版本Unity2021.3.5f1) 1.发布Windows客户端 ws/wss(不发布微信小游戏 ...

HTML+JS+websocket 实现联机“游戏王”对战（九）- 实现简单websocket通信

实现简单 websocket 通信

1. WebSocket 简介：

2. 搭建简易WebSocket服务端：

HTML+JS+websocket 实现联机“游戏王”对战（九）- 实现简单websocket通信相关推荐

最新文章

热门文章