回归前端学习第20天——实现俄罗斯方块小游戏1(搭建websocket)

最新推荐文章于 2024-03-15 16:36:09 发布

Gib Gas!

最新推荐文章于 2024-03-15 16:36:09 发布

阅读量296

点赞数

分类专栏：前端学习文章标签： node.js html css javascript jquery

本文链接：https://blog.csdn.net/weixin_44584059/article/details/107923374

版权

前端学习专栏收录该内容

60 篇文章 2 订阅

订阅专栏

结合WebSocket 来实现一个俄罗斯方块小游戏吧~

WebSocket 介绍
- WebSocket 特点
- 服务端实时通信的方法：AJAX轮询和Long Polling长轮询
开始码代码吧，小游戏走起！
- 搭建自己的WebSocket

效果图

WebSocket 介绍

webSocket是一项可以让服务器将数据主动推送给客户端的技术，是一种通信协议，区别于HTTP协议，HTTP协议只能实现客户端请求，服务端响应的这种单项通信；而WebSocket可以实现客户端与服务端的双向通讯，也就是可以做到服务端主动将消息推送给客户端。

WebSocket 特点

（1）建立在 TCP 协议之上，服务器端的实现比较容易。

（2）与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。

（3）数据格式比较轻量，性能开销小，通信高效。

（4）可以发送文本，也可以发送二进制数据。

（5）没有同源限制，客户端可以与任意服务器通信。

（6）协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

服务端实时通信的方法：AJAX轮询和Long Polling长轮询

AJAX轮询

AJAX轮询也就是定时发送请求，也就是普通的客户端与服务端通信过程，只不过是无限循环发送，这样，可以保证服务端一旦有最新消息，就可以被客户端获取。

Long Polling长轮询
Long Polling长轮询是客户端和浏览器保持一个长连接，等服务端有消息返回，断开。
然后再重新连接，也是个循环的过程，无穷无尽……客户端发起一个Long Polling，服务端如果没有数据要返回的话，会hold住请求，等到有数据，就会返回给客户端。客户端又会再次发起一次Long Polling，再重复一次上面的过程。

开始码代码吧，小游戏走起！

搭建自己的WebSocket

1.终端输入，安装模块

npm install nodejs-websocket

2.建立wsServer.js，输入代码如下：

var ws = require("nodejs-websocket")
var PORT= 8080

var server = ws.createServer(function (conn) {
    //受到连接触发//
    console.log('new connection');
    conn.on("text", function (str) {
        // 收到信息触发     接收 //
        console.log("received" + str)
        conn.sendText(str) // 发送 数据 //
    })
    conn.on("close", function (code, reason) {
        // 断开连接触发 //
        console.log("connection closed")
    })
    conn.on("error", function (err) {
        // 出错触发 //
        console.log("header err")
        console.log(err)
    })
}).listen(PORT)
console.log("websocket server listening on port" + PORT)

3.运行你的server

node wsServer.js

4.html代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>俄罗斯方块1</title>
</head>

<body>
    <h1>测试websocket</h1>
    <input type="text" id="snedTxt" />
    <button id="sendb">发送</button>
    <div id="recv"></div>
    <script type="text/javascript">
        var ws = new WebSocket("ws://localhost:8080/"); // 设置服务器地址 //
        ws.onopen = function () { // onopen 连接触发 //
            console.log("websocket open");
            document.getElementById("recv").innerHTML = "Connected";
            //  innerHTML 可以 获取 也可以 插入  //

        }
        ws.onclose = function () { // onclose 断开触发 //
            console.log("websocket close");
        }
        ws.onmessage = function (e) { // onmessage 接收到信息触发  //
            console.log(e.data);
            document.getElementById("recv").innerHTML = e.data;

        }
        document.getElementById("sendb").onclick = function () { // 监测 id=“sendb”的 按钮 触发 onclick 就会发送数据 send //
            var txt = document.getElementById("snedTxt").value;
            ws.send(txt);
        }
    </script>
</body>

</html>

打开浏览器，在文本框输入内容，数据将被发送至服务器，并在终端返回数据
在这里插入图片描述

如果网页打开还是没法正常显示，或许需要自己在防火墙开一个端口，这里只说明了建立入站规则，出站规则步骤基本一致，如图

Gib Gas!

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
回归前端学习第20天——实现俄罗斯方块小游戏1(搭建websocket)

结合WebSocket 来实现一个俄罗斯方块小游戏吧~WebSocket 介绍WebSocket 特点服务端实时通信的方法：AJAX轮询和Long Polling长轮询开始码代码吧，小游戏走起！搭建自己的WebSocket效果图WebSocket 介绍webSocket是一项可以让服务器将数据主动推送给客户端的技术，是一种通信协议，区别于HTTP协议，HTTP协议只能实现客户端请求，服务端响应的这种单项通信；而WebSocket可以实现客户端与服务端的双向通讯，也就是可以做到服务端主动将消息推送给客
复制链接

扫一扫