HTML+JS+websocket 实例，联机“游戏王”对战（九

作者: KalsasCaesar | 来源:发表于2021-06-10 16:18 被阅读0次

实现简单 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

<!DOCTYPE HTML>
<html>
   <head>
   <meta charset="utf-8">
   <title>websocket测试</title>
    
      <script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 初始化一个 WebSocket 对象，参数指明url
               var 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()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
      </script>
        
   </head>
   <body>
   
      <div id="sse">
         <a href="javascript:WebSocketTest()">运行 WebSocket</a>
      </div>
      
   </body>
</html>

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

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

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

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

nodejs_run_server.png

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

nodejs_server_msg.png

nodejs_client_msg.png

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

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

网友评论

游戏极客社区

本文标题：HTML+JS+websocket 实例，联机“游戏王”对战（九

本文链接：https://www.haomeiwen.com/subject/rkzrsltx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

HTML+JS+websocket 实例，联机“游戏王”对战（九

目录

实现简单 websocket 通信

1. WebSocket 简介：

2. 搭建简易WebSocket服务端：

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

游戏极客社区