对于webSocket的学习及原理了解

最新推荐文章于 2024-05-27 21:07:55 发布

LiX_Word

最新推荐文章于 2024-05-27 21:07:55 发布

阅读量749

点赞数 1

分类专栏： express websocket 文章标签： websocket express

本文链接：https://blog.csdn.net/qq_33566350/article/details/75508219

版权

express 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

websocket

1 篇文章 0 订阅

订阅专栏

学习了下websocket，实现个小demo，浏览器访问服务器，服务器记录每一个用户并发出页面回应。其实有点和ajax的轮询相似。它是实现服务端和客户端实时通信的技术。但是呢有很多人却混淆概念，因为开始是认为基于h5的技术，后面看了下网上的资料，其实WebSocket 根本不是 HTML5 的东西。WebSocket 是一个协议，归属于 IETF。WebSocket API 是一个 Web API，归属于 W3C。两个规范是独立发布的。广义上的 HTML5 里面包含的是 WebSocket API，并不是 WebSocket。简单的说，可以把 WebSocket 当成 HTTP，WebSocket API 当成 Ajax。只是因为 WebSocket 对于非 Web 部分的意义不大（毕竟直接用 TCP 就好了），所以从现实角度的概率上而言 WebSocket 目前基本只会通过 Web API 里的 WebSocket API 来使用。但并不等于 WebSocket 属于 WebSocket API。
这篇知乎上的回答可以看一下。
链接：https://www.zhihu.com/question/20215561/answer/117875755

1.websocket原理认知

HTTP是一个状态协议，服务器因为每天要接受很多数据，导致每个时间段就要重新发送。websocket能让服务端主动发信息给客户端。只需要经过一次HTTP请求，就可以做到源源不断的信息传送了。所以说整个通讯过程是建立在一次连接/状态中，也就避免了HTTP的非状态性，服务端会一直知道你的信息，直到你关闭请求。
实际上浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。
WebSocket API最伟大之处在于服务器和客户端可以在给定的时间范围内的任意时刻，相互推送信息。
目前支持WebSocket环境有很多方式，比如PHP、Java、.Net、Tomcat、Nodejs等，还有html5 的websocket方案。

2.环境配置

因为是在nodejs的环境上来使用websocket的，这里就去到nodejs相关的项目目录里面运行cmd。

 1.npm install socket.io

输入命令搭建

2.npm install nodejs-websocket

这里写图片描述
这样就可以开始在nodejs的express框架中来使用websocket了。

3.代码实现

(1).客户端

1.创建websocket对象
//服务器地址
var Socket = new WebSocket(url);

2.websocket事件
open：连接建立时触发
message：客户端接收服务端数据时触发
error：通信发生错误时触发
close：连接关闭时触发

3.Socket.send()：使用连接发送数据

实例：


<script>
       var ws = null;
       function getWs() {
           //ws = new WebSocket("ws://"+window.location.hostname+":8080");/ip访问
           ws = new WebSocket("ws://192.168.3.105:8080");//本地访问，握手操作连接
           ws.onopen = function () {
               console.log("ws open");
           }
           ws.onmessage = function (event) {
               var div = document.createElement("div");
               div.textContent = event.data;
               document.body.appendChild(div);
           }
           ws.onclose = function () {
               console.log("ws close");
           }
           ws.onerror = function () {
               console.error("ws error");
           }
       }

       function sendWs(){
           var msg = document.getElementById("msg");
           if(msg.value == ''){
               alert('聊天内容不能为空');
           } else {
               var date = new Date();
               var time = date.getHours()+":"+date.getMinutes()+":"+date.getSeconds();
               ws.send("["+time+"] "+msg.value);
               msg.value = '';
           }
       }    </script> </head>
       <body onload="getWs()"> <input size="50" id="msg"    placeholder="请输入聊天内容"> <input type="submit" value="发送" id="show"    onclick="sendWs()"> </body>

（2）服务端

1.引入websocket
var ws = require("nodejs-websocket");

2.实现互动（握手操作）
var server = ws.createServer(function (conn) {
  console.log('connection sussess');
  conn.on("text", function (str) {
   server.connections.forEach(function (connection) {
            connection.sendText(str);
    });
  });
});

3.监听服务器，实现实时的互相推送
server.listen(8080);//设置服务器端口

实例：

var express = require("express");
var app = express();
//设置静态文件
app.use(express.static('public'));
//指定模板引擎
app.set("views engine", 'ejs');
//指定模板位置
app.set('views', __dirname + '/views');

//利用模板文件home.ejs渲染为html
app.get("/", function(req, res) {


    res.render('home');
});

var server = app.listen(3000, function() {
    console.log("请在浏览器访问：http://localhost:3000/");
});

var ws = require("nodejs-websocket");
//创建服务器，实现握手操作（实现互动）
var server = ws.createServer(function (conn) {
    console.log('connection sussess');
    conn.on("text", function (str) {
        server.connections.forEach(function (connection) {
            connection.sendText(str);
        });
    });
});
server.listen(8080);//设置服务器端口

4.总结

至此，一个简单的功能就实现了，浏览器输入域名请求，服务器就会发出个网页显示出来，也会记录每一个访问它的电脑。每一次会话都会给所有的电脑发出，互相推送。

LiX_Word

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
对于webSocket的学习及原理了解

学习了下websocket，实现个小demo，浏览器访问服务器，服务器记录每一个用户并发出页面回应。其实有点和ajax的轮询相似。它是实现服务端和客户端实时通信的技术。但是呢有很多人却混淆概念，因为开始是认为基于h5的技术，后面看了下网上的资料，其实WebSocket 根本不是 HTML5 的东西。WebSocket 是一个协议，归属于 IETF。WebSocket API 是一个 Web API，
复制链接

扫一扫