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

最新推荐文章于 2024-04-19 13:21:13 发布

KalsasCaesar

最新推荐文章于 2024-04-19 13:21:13 发布

阅读量1.4k

点赞数 3

分类专栏：游戏前端文章标签： WebSocket 游戏王联机对战 Node.js 实时通信

本文链接：https://blog.csdn.net/kalsascaesar/article/details/116519170

版权

游戏同时被 2 个专栏收录

13 篇文章 3 订阅

订阅专栏

前端

13 篇文章 2 订阅

订阅专栏

目录：

实现简单 websocket 通信

1. WebSocket 简介：

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

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

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

2. 搭建简易WebSocket服务端：

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

首先我们需要下载并安装node.js：
nodejs_web
搜索node.js，官网下载，有稳定版本和最新版本，一般用稳定版本，安装跟着提示走就行。

安装好后打开命令提示符cmd，输入node，执行出现版本号就表示成功安装了：
nodejs_cmd_ver
接下来开始搭建简易服务端。

随意建立一个项目文件夹，之后在该文件夹下运行命令窗口（或者cd到该文件夹），并输入命令 npm install ws 来安装 websocket 依赖包，安装后项目目录下会生成一个文件夹 node_modules 与一个 json 文件：
nodejs_project_folder
之后我们创建作为服务端的 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();
    });

	
});

当有客户端初次与服务端建立连接时，触发 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 对象，参数指明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>