node.js中ws模块创建服务端和客户端,网页WebSocket客户端


Posted in Javascript onMarch 06, 2019

首先下载websocket模块,命令行输入

npm install ws

1.node.js中ws模块创建服务端

// 加载node上websocket模块 ws;
var ws = require("ws");
// 启动基于websocket的服务器,监听我们的客户端接入进来。
var server = new ws.Server({
 host: "127.0.0.1",
 port: 6080,
});
// 监听接入进来的客户端事件
function websocket_add_listener(client_sock) {
 // close事件
 client_sock.on("close", function() {
 console.log("client close");
 });
 // error事件
 client_sock.on("error", function(err) {
 console.log("client error", err);
 });
 // end 
 // message 事件, data已经是根据websocket协议解码开来的原始数据;
 // websocket底层有数据包的封包协议,所以,绝对不会出现粘包的情况。
 // 每解一个数据包,就会触发一个message事件;
 // 不会出现粘包的情况,send一次,就会把send的数据独立封包。
 // 如果我们是直接基于TCP,我们要自己实现类似于websocket封包协议就可以完全达到一样的效果;
 client_sock.on("message", function(data) {
 console.log(data);
 client_sock.send("Thank you!");
 });
 // end 
}
// connection 事件, 有客户端接入进来;
function on_server_client_comming (client_sock) {
 console.log("client comming");
 websocket_add_listener(client_sock);
}
server.on("connection", on_server_client_comming);
// error事件,表示的我们监听错误;
function on_server_listen_error(err) {
}
server.on("error", on_server_listen_error);
// headers事件, 回给客户端的字符。
function on_server_headers(data) {
 // console.log(data);
}
server.on("headers", on_server_headers);

2.node.js中ws模块创建客户端

var ws = require("ws");
// url ws://127.0.0.1:6080
// 创建了一个客户端的socket,然后让这个客户端去连接服务器的socket
var sock = new ws("ws://127.0.0.1:6080");
sock.on("open", function () {
 console.log("connect success !!!!");
 sock.send("HelloWorld1");
 sock.send("HelloWorld2");
 sock.send("HelloWorld3");
 sock.send("HelloWorld4");
 sock.send(Buffer.alloc(10));
});
sock.on("error", function(err) {
 console.log("error: ", err);
});
sock.on("close", function() {
 console.log("close");
});
sock.on("message", function(data) {
 console.log(data);
});

3.网页客户端创建(使用WebApi --->WebSocket)

<!DOCTYPE html>
<html>
<head>
 <title>skynet websocket example</title>
</head>
<body>
 <script>
 var ws = new WebSocket("ws://127.0.0.1:6080/index.html");
 ws.onopen = function(){
 alert("open");
 ws.send("WebSocket hellowrold!!");
 };
 ws.onmessage = function(ev){
 alert(ev.data);
 };
 ws.onclose = function(ev){
 alert("close");
 };
 ws.onerror = function(ev){
 console.log(ev);
 alert("error");
 };
 </script>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
JS中LocalStorage与SessionStorage五种循序渐进的使用方法
Jul 12 Javascript
Vue 项目分环境打包的方法示例
Aug 03 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
vue动态设置img的src路径实例
Sep 18 Javascript
vue2.x集成百度UEditor富文本编辑器的方法
Sep 21 Javascript
React 路由懒加载的几种实现方案
Oct 23 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
vue柱状进度条图像的完美实现方案
Aug 26 Javascript
vue下的@change事件的实现
Oct 25 Javascript
在vue中获取wangeditor的html和text的操作
Oct 23 Javascript
node.js中express模块创建服务器和http模块客户端发请求
Mar 06 #Javascript
微信小程序性能优化之checkSession的使用
Mar 06 #Javascript
详解在微信小程序的JS脚本中使用Promise来优化函数处理
Mar 06 #Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 #Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 #Javascript
深入理解Puppeteer的入门教程和实践
Mar 05 #Javascript
[jQuery] 事件和动画详解
Mar 05 #jQuery
You might like
PHP学习笔记之二
2011/01/17 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jQuery加载及解析XML文件的方法实例分析
2017/01/22 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
nodejs简单抓包工具使用详解
2019/08/23 NodeJs
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
原生js实现密码强度验证功能
2020/03/18 Javascript
小程序表单认证布局及验证详解
2020/06/19 Javascript
antd design table更改某行数据的样式操作
2020/10/31 Javascript
Vue如何循环提取对象数组中的值
2020/11/18 Vue.js
python基于windows平台锁定键盘输入的方法
2015/03/05 Python
python3.6+opencv3.4实现鼠标交互查看图片像素
2018/02/26 Python
解决Pandas to_json()中文乱码,转化为json数组的问题
2018/05/10 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python图像的增强处理操作示例【基于ImageEnhance类】
2019/01/03 Python
python自动化UI工具发送QQ消息的实例
2019/08/27 Python
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python爬虫库requests获取响应内容、响应状态码、响应头
2020/01/25 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
Python自动化xpath实现自动抢票抢货
2020/09/19 Python
详解Django关于StreamingHttpResponse与FileResponse文件下载的最优方法
2021/01/07 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
大学毕业的自我鉴定
2013/10/08 职场文书
安卓程序员求职信
2014/02/28 职场文书
店面销售职位的职责
2014/03/09 职场文书
《生命的药方》教学反思
2014/04/08 职场文书
尊师重教演讲稿
2014/09/04 职场文书
投资意向协议书
2015/01/29 职场文书
收费员岗位职责
2015/02/14 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
centos8安装nginx1.9.1的详细过程
2021/08/02 Servers