只要动手做起来，多投入时间和精力、耐心去研究，以大多人的智商加google，平时遇到的大部分问题我们都是可以自己解决的，大部分的知识我们都是可以掌握的。

我们都知道http协议是单向请求的，无法实现双向通信，它只能从客户端发送请求，然后服务端再响应请求，无法做到服务端主动向客户端去推送消息。

尽管可以通过setTimeout/setInterval轮询的方式来不断去刷新获取服务端的数据，但是轮询的效率低，非常浪费资源。webscoket就是为了解决这一问题而存在的。

webscoket的特点：

1、建立在Tcp协议之上

2、与http协议有着很好的兼容性

3、通信高效，因为它的数据格式比较轻量、性能开销小

4、可以发送文本和二进制数据

5、没有同源限制

6、协议标识符是ws

简单的通信原理如下

客户端的实现：

浏览器端的实现

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>WebSocket</title>
  8. </head>
  9. <body>
  10.     <h1>Echo Test</h1>
  11.     <input id="sendTxt" type="text"/>
  12.     <button id="sendBtn">发送</button>
  13.     <div id="recv"></div>
  14.     <script type="text/javascript">
  15.  
  16.         var WebSocket = new WebSocket("ws://localhost:8080");
  17.         WebSocket.onopen = function(){
  18.             console.log('websocket open');
  19.             document.getElementById("recv").innerHTML = "Connected";
  20.         }
  21.         WebSocket.onclose = function(){
  22.             console.log('websocket close');
  23.         }
  24.         WebSocket.onmessage = function(e){
  25.             console.log(e.data);
  26.             document.getElementById("recv").innerHTML = e.data;
  27.         }
  28.         document.getElementById("sendBtn").onclick = function(){
  29.             var txt = document.getElementById("sendTxt").value;
  30.             WebSocket.send(txt);
  31.         }
  32.     </script>
  33. </body>
  34. </html>

　

服务端实现：

nodejs搭建服务器，可以参考git上的《一起学nodejs》搭建服务器

文件目录下 npm install webscoket

  1. var WebSocketServer = require('websocket').server;
  2. var http = require('http');
  3. var server = http.createServer(function(request, response) {
  4. 	console.log((new Date()) + ' Received request for ' + request.url);
  5. 	response.writeHead(404);
  6. 	response.end();
  7. });
  8.  
  9. server.listen(8080, function() {
  10. 	console.log((new Date()) + ' Server is listening on port 8080');
  11. });
  12.  
  13. wsServer = new WebSocketServer({
  14. 	httpServer: server,
  15. 	// You should not use autoAcceptConnections for production
  16. 	// applications, as it defeats all standard cross-origin protection
  17. 	// facilities built into the protocol and the browser.  You should
  18. 	// *always* verify the connection's origin and decide whether or not
  19. 	// to accept it.
  20. 	autoAcceptConnections: false
  21. });
  22.  
  23. function originIsAllowed(origin) {
  24. 	// put logic here to detect whether the specified origin is allowed.
  25. 	return true;
  26. }
  27.  
  28. wsServer.on('request', function(request) {
  29. 	if (!originIsAllowed(request.origin)) {
  30. 		// Make sure we only accept requests from an allowed origin
  31. 		request.reject();
  32. 		console.log((new Date()) + ' Connection from origin ' + request.origin + ' rejected.');
  33. 		return;
  34. 	}
  35.  
  36. 	var connection = request.accept('', request.origin);
  37. 	console.log((new Date()) + ' Connection accepted.');
  38. 	connection.on('message', function(message) {
  39. 			if (message.type === 'utf8') {
  40. 					console.log('Received Message: ' + message.utf8Data);
  41. 					connection.sendUTF(message.utf8Data);
  42. 			}
  43. 			else if (message.type === 'binary') {
  44. 					console.log('Received Binary Message of ' + message.binaryData.length + ' bytes');
  45. 					connection.sendBytes(message.binaryData);
  46. 			}
  47. 	});
  48. 	connection.on('close', function(reasonCode, description) {
  49. 			console.log((new Date()) + ' Peer ' + connection.remoteAddress + ' disconnected.');
  50. 	});
  51. });

　　

参考资料：

客户端（浏览器端）实现参考阮一峰：http://www.ruanyifeng.com/blog/2017/05/websocket.html

webscoket通信初步（一）的更多相关文章

  1. win32 线程通信初步

    // 线程通信机制.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #define NUM_THREADS 10 #include < ...

  2. 前端后端通信初步尝试(javascript - flask)

    在某项目中,需要使用python flask做后端功能开发,web提供功能入口. 此时需要使用Ajax通信. 由于以前从未接触过网络传输,记录了一些基础知识. 资料参考<HTML5+CSS3+J ...

  3. 阿里云负载不支持 WebSocket 协议与 WSS 和 Nginx 配置问题

    WebSocket 是 HTML5 下一种新的协议.它实现了浏览器与服务器全双工通信,能更好的节省服务器资源和带宽并达到实时通讯的目的.它与HTTP一样通过已建立的TCP连接来传输数据,但是它和HTT ...

  4. node的socket.io类库概述

    socket.io是一个简单的小类库,该类库实现的功能类似于node中的net模块所实现的功能. 这些功能包括websocket通信,xhr轮询,jsonp轮询等. socket类库可以接受所有与服务 ...

  5. Netty之WebSocket和四种IO介绍

    Netty简介 一.什么是netty? 高性能 事件驱动 异步非堵塞 基于NIO的客户端,服务器端编程框架 稳定性和伸缩性 二.Netty的使用场景 高性能领域   多线程并发领域   异步通信领域 ...

  6. VsCode插件开发之插件初步通信

    参考了Egret Wing,想像Egret Wing那样在上方titlebar最右边上面增加一个menu(这个menu相对于一个按钮,当点击这个按钮时会出现一个window弹框,这个window弹框里 ...

  7. 基于C/S架构的3D对战网络游戏C++框架 _05搭建系统开发环境与Boost智能指针、内存池初步了解

    本系列博客主要是以对战游戏为背景介绍3D对战网络游戏常用的开发技术以及C++高级编程技巧,有了这些知识,就可以开发出中小型游戏项目或3D工业仿真项目. 笔者将分为以下三个部分向大家介绍(每日更新): ...

  8. Azure底层架构的初步分析

    之所以要写这样的一篇博文的目的是对于大多数搞IT的人来说,一般都会对这个topic很感兴趣,因为底层架构直接关乎到一个公有云平台的performance,其实最主要的原因是我们的客户对此也非常感兴趣, ...

  9. webScoket的浅短的认识

    在一般的发送数据请求的时候都是用的http协议,但是对于类似即时聊天,需要客户端与服务器不间断的交互的时候对于http协议来说就不太适用了.因为http协议无法主动把数据发到客户端,而且客户端发送请求 ...

随机推荐

  1. 管道符和作业 shell变量 环境变量

    管道符  |      前一个命令的输出,变成后一个命令的输入 ctrl +z   暂停 bg  cmd   后台运行 fg  #  调回前台 直接让程序进入后台,可以在后面加上 cmd    &am ...

  2. QuickSort（Java）

    private void quickSort(int[] input, int start, int end) { if (start >= end) return; int index = p ...

  3. CTF—训练平台——Crypto

    一.滴答~滴 看形式是摩尔斯电码,放到解密网址里解密http://www.jb51.net/tools/morse.htm 二.聪明的小羊 看到题目里“栅栏”,“2个”想到是栅栏加密:栏数为两栏: 三 ...

  4. hello1分析

    1:选择hello1文件夹并单击“打开项目”.展开“Web页”节点,然后双击该index.xhtml文件以在编辑器中查看它. 该index.xhtml文件是Facelets应用程序的默认登录页面.在典 ...

  5. day 06Hadoop

    更换虚拟机以后操作的步奏1.到每一台机器上修改ip地址 ,然后修改hosts1.5 给每台机器配置免密码登录 2.修改hadoop 的配置文件,发送到每台机器上3.启动dfs start-dfs.sh ...

  6. 多线程线性 lock

    有时我们lock一段代码或许要根据某个变量的值,值相同则不允许有两个或以上的方法并行运行,我在工作中就遇到了,有100个值,相同的参数值不能并行运行. 还有就是一个被lock的方法递归调用会不会死锁, ...

  7. MongoDB的真正性能-实战百万用户

    阅读目录 一.第一个问题:Key-Value数据库可以有好多的Key,没错,但对MongoDB来说,大错特错 二.第二个问题:FindOne({_id:xxx})就快么? 三.第三个问题:精细的使用U ...

  8. VS版本号定义、规则和相关的Visual Studio插件

    软件版本号主要标识了软件的版本,通过其可以了解软件.类库文件的当前版本,使得软件版本控制有所依据. 我们就Windows系统和.NET Framework的编号规则来看,软件版本号的定义结构一般是这样 ...

  9. Pycharm主题设置以及导入方式

    主题下载链接: http://www.themesmap.com/ pycharm -- 导入主题(theme) and 修改背景颜色(护眼色)   前情提要 众所周知,随着python语言的不断流行 ...

  10. 两个简单的API限流实现方案

    1, Ngnix限流 Nginx在架构中起到请求转发与负载均衡器的作用.外部req首先到Nginx监听的80端口,然后Nginx将req交给到监听8080端口的APP服务器处理.处理结果再经由Ngin ...