初识websocket
之前对websocket是一点都不了解(H5都那么久了,实在不该),由于工作中需要了解websocket相关知识,自己查阅资料、模拟环境、调试等一系列操作之后从网上看到适合小白的一段代码,Ctrl+C,Ctrl+V之后,在代码中加了自己的理解,代码中注释是自己的一些看法,理解如有误,路过的大神多指正,小白级别,勿喷哦。
在服务端使用了nodejs中ws模块,以便在本地开启websocket服务端
安装node环境,并
npm install ws –g ; npm install uuid –g ; npm install
新建server.js
//服务端使用nodejs中ws模块,在wss对象中如果不写host参数,默认host指向localhost(127.0.0.1),如果使用默认的host,服务端和客户端在使用localhost和127.0.0.1时尽量书写一致,不然可能会引起websocket连接过慢哦,小伙伴们可以自行测试一下。 var WebSocket = require('ws'); var WebSocketServer = WebSocket.Server, wss = new WebSocketServer({ port: 8181 }); var uuid = require('node-uuid'); //unique identifier 惟一标识符 -->> uid // uuid.v1();基于时间戳v1()生成uid,uuid.v4()随机生成uid,通常使用v1,v4还是有概率重复的 var clients = []; //wsSend实现服务端广播客户端 function wsSend(type, client_uuid, nickname, message) { for (var i = 0; i < clients.length; i++) {//服务端会广播消息给多个客户端 var clientSocket = clients[i].ws; if (clientSocket.readyState === WebSocket.OPEN) {//客户端websocket处于连接状态才会广播消息 clientSocket.send(JSON.stringify({ "type": type, "id": client_uuid, "nickname": nickname, "message": message })); } } } var clientIndex = 1; wss.on('connection', function(ws) {//客户端open时,会触发服务端connection,服务端的消息会广播给多个客户端 var client_uuid = uuid.v4(); var nickname = "AnonymousUser" + clientIndex; clientIndex += 1; //当服务一直开启的状态,如果刷新客户端页面,此时clientIndex会一直增加,此处可以优化,客户端刷新时nickname保持当前的状态 //有客户端连接时,记录当前客户端的信息 clients.push({ "id": client_uuid, "ws": ws, "nickname": nickname }); console.log('client [%s] connected', client_uuid); var connect_message = nickname + " has connected"; wsSend("notification", client_uuid, nickname, connect_message); //个人想法:功能1实现服务端定时发送消息 /* setInterval(function(){ wsSend("xixi",client_uuid,nickname,"xixi"); },1000); */ //个人想法:想法2消息单项发送 //可以在发送消息或者连接成功之后发送消息给某个客户端 //结合1 2 在服务端针对某个客户端单项发送消息,可增加触发某个条件取消定时器发送消息 //个人想法: 想法3 实现websocket断开连接重连 console.log('client [%s] connected', client_uuid); ws.on('message', function(message) { if (message.indexOf('/nick') === 0) {//判断是什么消息类型,含有/nick表示修改昵称,不过通过'/nick'判断不算严谨,在发送消息的input框中输入"/nick haha hahah hha",会提示昵称修改 var nickname_array = message.split(' '); console.log(nickname_array.length); if (nickname_array.length >= 2) { var old_nickname = nickname; nickname = nickname_array[1]; var nickname_message = "Client " + old_nickname + " changed to " + nickname; wsSend("nick_update", client_uuid, nickname, nickname_message); } } else { wsSend("message", client_uuid, nickname, message); } }); //客户端失去连接,广播消息给其他客户端是哪个客户端失去了连接 var closeSocket = function(customMessage) { for (var i = 0; i < clients.length; i++) { if (clients[i].id == client_uuid) { var disconnect_message; if (customMessage) { disconnect_message = customMessage; } else { disconnect_message = nickname + " has disconnected"; } wsSend("notification", client_uuid, nickname, disconnect_message); clients.splice(i, 1);//在客户端列表中删除已经失效的客户端 } } }; ws.on('close', function () { closeSocket(); }); process.on('SIGINT', function () {//nodejs 捕获当前进程接收到的信号 console.log("Closing things"); closeSocket('Server has disconnected'); process.exit();//退出当前进程 }); });
新建client.html文件
<!Doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>WebSocket Echo Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"/> <link href="../bootstrap-3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <style type="text/css"> li h2{ font-size:20px; } </style> <script src="../js/jquery-1.12.3.min.js"></script> <script src="../bootstrap-3.3.5/js/bootstrap.min.js"></script> <script> //建立连接 var ws = new WebSocket("ws://localhost:8181"); var nickname = ""; ws.onopen = function (e) { console.log('Connection to server opened'); } //页面显示 function appendLog(type, nickname, message) { if (typeof message == "undefined") return; var messages = document.getElementById('messages'); var messageElem = document.createElement("li"); var preface_label; if (type === 'notification') { //针对不同的消息类型,显示不同的状态 preface_label = "<span class=\"label label-info\">*</span>"; } else if (type == 'nick_update') { preface_label = "<span class=\"label label-warning\">*</span>"; } else { preface_label = "<span class=\"label label-success\">" + nickname + "</span>"; } var message_text = "<h2>" + preface_label + " " + message + "</h2>"; messageElem.innerHTML = message_text; messages.appendChild(messageElem); } //收到消息处理 ws.onmessage = function (e) { var data = JSON.parse(e.data); nickname = data.nickname; appendLog(data.type, data.nickname, data.message); console.log("ID: [%s] = %s", data.id, data.message); } ws.onclose = function (e) { appendLog("Connection closed"); console.log("Connection closed"); } //发送消息 function sendMessage() { var messageField = document.getElementById('message'); if (ws.readyState === WebSocket.OPEN) { ws.send(messageField.value); } messageField.value = ''; messageField.focus(); } //修改名称 function changName() { var name = $("#name").val(); if (ws.readyState === WebSocket.OPEN) { ws.send("/nick " + name); } } function disconnect() { ws.close(); } </script> </head> <body > <div> <div> <ul id="messages"></ul> <hr/> <form role="form" id="chat_form" onsubmit="sendMessage(); return false;"> <div> <input type="text" id="message" name="message" placeholder="Type text to echo in here" value="" autofocus/> </div> <button type="button" id="send" class="btn btn-primary" onclick="sendMessage();"> Send Message </button> </form> <div><span>nikename:</span><input id="name" type="text" /> <button class="btn btn-sm btn-info" onclick="changName();">change</button></div> </div> </div> </body> </html>
最新评论
- 相关文章
创建非矩形网页页面元素的常用技术和实例代码
非矩形设计正在变成一种时尚,比如波浪形、菱形、三角形等:而随着技术发展,这种设计在技术实现上也变得更容易。本文以最简单的三角形为例,演示使用5种方法来...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
CSS3人行走动作图解和动画实现
对于人类而言,行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路,但至此以后的几十年间,或许我们从来没留意过自己行走姿势。当...
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数(function)是一等公民,函数的调用有多种方法。普通调用这个是最常见和直接的方式:function
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时,其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范...CSS3弹性布局弹性流(flex-flow)属性详解和实例
弹性布局是CSS3引入的强大的布局方式,用来替代以前Web开发人员使用的一些复杂而易错hacks方法(如使用float进行类似流式布局)。其中flex-flow是flex-direction...
深入理解CSS3滤镜(filter)功能和实例详解
CSS3滤镜功能源自SVG滤镜规范,SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果(模糊、...深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能,并深入剖析了其内在原因。技术结论大致如下:1. jQuery出于设计原因,在动画性能上表现最差2. CSS3由于把动画逻辑推给了...
Babylon.js入门教程和开发实例
Babylon.js是一款WebGL开发框架。和Three.js类似。主要的技术区别是Three.js还试图回退兼容CSS 3D。Three.js是完全社区推动的,比Babylon.js要成熟些,而Babylon...
Three.js 对象局部坐标转换为世界坐标
在Three.js中进行顶点几何计算时,一个需要注意的地方是,需要统一坐标系。比如你通过Three.js提供的API创建了一个球体网孔对象,那么默认情况下,各网孔顶点的...
Three.js入门教程5 - 10个必须知道的编程技巧
作者为Google的Paul,关于如何写出好的WebGL代码的文章。和很多开发者一样,我通过实践学习,但同时我也向其他更有经验的开发者们学习。在过去的几个月中,我在c...
WebGL入门教程6 - 光照效果和Phong光照模型
正是因为有了光,世界才能被我们看见,在3D的世界里,光照给物体带来真实的视觉感受。当光照射在某一表面上时,它可能被吸收、反射或投射。其中入射到表面上的一...
IE各版本CSS Hack(兼容性处理)语法速查表
为了兼容IE各个版本,需要在CSS中添加额外的代码,比如以前常用的_width。之所以工作,是因为浏览器会忽略不能解析的样式规则,因此举个例子来说,把_width写在w...
浏览器控制台报JS脚本执行错误:Module is not defined
现在JS分成了两个分支,一部分在服务器端发展如NodeJS,一部分是传统的浏览器运行环境。
有些插件在编写JS代码时,是针对Node编写的,所以直接在浏览器中使... 更多...