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

目录

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

实现简单 websocket 通信

1. WebSocket 简介：

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

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

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

2. 搭建简易WebSocket服务端：

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

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

nodejs_web.png

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

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

nodejs_cmd_ver.png

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

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

nodejs_project_folder.png

之后我们创建作为服务端的 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+c
    process.on('SIGINT', function () {
        console.log("Closing things");
        process.exit();
    });

    
});

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

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

   
   
   
    
      
        
   
   
   
      

         运行 WebSocket
      
      
   

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

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

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

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

nodejs_run_server.png

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

nodejs_server_msg.png

nodejs_client_msg.png

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

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