对于webSocket的学习及原理了解

来源：互联网发布：mac口红dangerous 编辑：程序博客网时间：2024/05/21 14:02

学习了下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.引入websocketvar 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渲染为htmlapp.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.总结

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

阅读全文

1 0