【node＋小程序＋web端】简单的websocket通讯
【node＋小程序＋web端】简单的websocket通讯
websoket是用来做什么的？
聊天室 消息列表 拼多多
即时通讯，推送, 实时交互
websoket是什么
websocket是一个全新的、独立的协议，基于TCP协议，与HTTP协议兼容却不会融入HTTP协议，仅仅作为HTML5的一部分。
HTTP是个懒惰的协议，server只有收到请求才会做出回应，否则什么事都不干。因此，为了彻底解决这个server主动像client发送数据的问题。W3C在HTML5中提供了一种client与server间进行全双工通讯的网络技术WebSocket。
node模块websocket和socket.io的区别
websocket只是socket.io实现业务封装的一个浏览器方面的backend，类比的话，websocket是tcp，而socket.io是http，后者固然基于前者，但是必须要找socket.io约定的protocol走
用socket.io简单的建立一个服务器
const http = require('http');
const io = require('socket.io');
// 创建http服务
let httpServer = http.createServer();
httpServer.listen(2333,()=>{
console.log('on port 2333')
});
// 创建websocket服务,将socket.io绑定到服务器上
let wsServer = io.listen(httpServer,()=>{
console.log('on port 2333')
});
wsServer.on('connection',function(sock){
sock.on('a',function(num1,num2){
console.log(`接到了浏览器发送的数据:${num1}`)
})
setInterval(function(){
sock.emit('ttt',Math.random())
},500)
})
用websocket搭建服务器
const http = require('http')
const WebSocketServer = require('websocket').server
const httpServer = http.createServer((request, response) => {
console.log('[' + new Date + '] Received request for ' + request.url)
response.writeHead(404)
response.end()
})
const wsServer = new WebSocketServer({
httpServer,
autoAcceptConnections: true
})
wsServer.on('connect', connection => {
connection.on('message', message => {
if (message.type === 'utf8') {
console.log('>> message content from client: ' + message.utf8Data)
connection.sendUTF('[from server] ' + message.utf8Data)
}
}).on('close', (reasonCode, description) => {
console.log('[' + new Date() + '] Peer ' + connection.remoteAddress + ' disconnected.')
})
})
httpServer.listen(8111, () => {
console.log('[' + new Date() + '] Serveris listening on port 8080')
})
在html页面调用websocket
<html>
<body>
<head>
<script src="http://localhost:2333/socket.io/socket.io.js" charset="utf-8"></script>
<script>
let sock = io.connect('ws://localhost:2333')
document.onclick=function(){
sock.emit()
}
sock.on('ttt',function(n){
console.log(`接到了服务器发送的${n}`)
})
</script>
</head>
</body>
</html>
在小程序端调用请求
小程序websocket-api
localsession: function(data){
wx.connectSocket({
url: 'ws://localhost:8999'
})
wx.onSocketOpen(function (res) {
console.log('WebSocket连接已打开！')
setInterval(()=>{
wx.sendSocketMessage({
data: data,
})
},3000)
})
wx.onSocketMessage(function (res) {
console.log(res)
})
wx.onSocketClose(function (res) {
console.log('WebSocket连接已关闭！')
})
},
在vue中运用websocket
1.
vue-websocket
2.
vue-socket.io
3.
let ws = new WebSocket('ws://192.168.1.205:9032/websocket');
ws.onopen = () => {
// Web Socket 已连接上，使用 send() 方法发送数据
//console.log('数据发送中...')
//ws.send('Holle')
//console.log('数据发送完成')
}
ws.onmessage = evt => {
console.log('数据已接收...')
var received_msg = evt.data;
console.log(received_msg);
if("notice" == received_msg)
{
this.initData();
this.play();
}
else{
console.log("不刷新");
}
}
/* ws.onclose = function () {
// 关闭 websocket
console.log('连接已关闭...')
}
// 路由跳转时结束websocket链接
this.$router.afterEach(function () {
ws.close()
})*/
【node＋小程序＋web端】简单的websocket通讯的更多相关文章
- 小程序 web 端实时运行工具
微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/
- 一套代码小程序&Web&Native运行的探索05——snabbdom
接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...
- 一套代码小程序&Web&Native运行的探索03——处理模板及属性
接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- 一套代码小程序&Web&Native运行的探索02
接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...
- 一套代码小程序&Web&Native运行的探索04——数据更新
接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...
- uniapp之uni-starter小程序多端研发框架搭建与项目实践
随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...
- 一套代码小程序&Web&Native运行的探索06——组件系统
接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...
- java实现微信小程序服务端(登录)
微信小程序如今被广泛使用,微信小程序按照微信官网的定义来说就是: 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 这就是微信小程序的魅力所在,有 ...
- 微信小程序 wxs的简单应用
Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...
随机推荐
- 继承extends、super、this、方法重写overiding、final、代码块_DAY08
1:Math类的随机数(掌握) 类名调用静态方法. 包:java.lang 类:Math 方法:public static double random(): Java.lang包下的类是不用导包就可 ...
- 输入两棵二叉树A，B，判断B是不是A的子结构(c++实现)
#include <iostream> #include <cstdio> #include <stdio.h> #include <string> # ...
- 世界上最短的bash脚本
世界上最短的bash脚本长这样: #!/bin/bash 为啥呢?见下图: 推荐一篇文章,讲解为啥shell脚本开头总是"#!/bin/bash".文风太清奇,不好翻译,看原文吧: ...
- 图片按日期分类和查看程序（WPF开发）(附源码)
手机方便了我们的生活,可以随时随地拍摄.越来越多的图片堆砌在电脑里.看到杂乱无章的图片,实在感到头痛.手动整理太复杂.基于此,我写了一个小程序,可以将图片按日期整理和查看.按日期查看图片,回忆过去的点 ...
- 【转载】配置文件报错：不允许有匹配 [xX][mM][lL] 的处理指令目标
今天编写代码的时候,不小心给一个xml文件的首行加了一行空格,导致了启动报了如题类似的错误,查到一篇文章,顺藤摸瓜发现了这个失误,文章转载如下: 框架整合 的时候,XML 配置文件大多数情况是从另一个 ...
- redis学习（六）redis管道
redis管道 1.redis管道介绍 redis采用的是CS架构,客户端与服务器端通过tcp协议进行连接通信,因此无论是发出请求还是接收响应,都必须经过网络传输.在tcp连接过程中,客户端和服务器端 ...
- 2015年第六届蓝桥杯C/C++程序设计本科B组决赛 完美正方形
完美正方形 如果一些边长互不相同的正方形,可以恰好拼出一个更大的正方形,则称其为完美正方形.历史上,人们花了很久才找到了若干完美正方形.比如:如下边长的22个正方形 2 3 4 6 7 8 12 13 ...
- 深度理解C# 的执行原理
欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由鹅厂优文发表于云+社区专栏 从编译原理说起 虚拟机是什么 C# 是什么,IL 又是什么 .Net Framework vs Mono ...
- <context:component-scan>子标签：<context:include-filter>和<context:exclude-filter>使用时要注意的地方
在Spring MVC中的配置中一般会遇到这两个标签,作为<context:component-scan>的子标签出现. 但在使用时要注意一下几点: 1.在很多配置中一般都会吧Spring ...
- mysql安装时，提示：Failed to start service MYSQL80
在安装MySQL8.0.13的最后一步,配置启动MySQL服务的时候,MySQL启动失败,查看Log日志错误如下: Attempting to start service MySQL80... Fai ...