【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简单的建立一个服务器

  1. const http = require('http');
  2. const io = require('socket.io');
  4. // 创建http服务
  5. let httpServer = http.createServer();
  6. httpServer.listen(2333,()=>{
  7.   console.log('on port 2333')
  8. });
  9. // 创建websocket服务,将socket.io绑定到服务器上
  10. let wsServer = io.listen(httpServer,()=>{
  11.   console.log('on port 2333')
  12. });
  14. wsServer.on('connection',function(sock){
  15.   sock.on('a',function(num1,num2){
  16.     console.log(`接到了浏览器发送的数据:${num1}`)
  17.   })
  18.   setInterval(function(){
  19.     sock.emit('ttt',Math.random())
  20.   },500)
  21. })

用websocket搭建服务器

  1. const http = require('http')
  2. const WebSocketServer = require('websocket').server
  4. const httpServer = http.createServer((request, response) => {
  5.     console.log('[' + new Date + '] Received request for ' + request.url)
  6.     response.writeHead(404)
  7.     response.end()
  8. })
  10. const wsServer = new WebSocketServer({
  11.     httpServer,
  12.     autoAcceptConnections: true
  13. })
  15. wsServer.on('connect', connection => {
  16.     connection.on('message', message => {
  17.         if (message.type === 'utf8') {
  18.             console.log('>> message content from client: ' + message.utf8Data)
  19.             connection.sendUTF('[from server] ' + message.utf8Data)
  20.         }
  21.     }).on('close', (reasonCode, description) => {
  22.         console.log('[' + new Date() + '] Peer ' + connection.remoteAddress + ' disconnected.')
  23.     })
  24. })
  26. httpServer.listen(8111, () => {
  27.     console.log('[' + new Date() + '] Serveris listening on port 8080')
  28. })

在html页面调用websocket

  1. <html>
  2.   <body>
  3.     <head>
  4.       <script src="http://localhost:2333/socket.io/socket.io.js" charset="utf-8"></script>
  5.       <script>
  6.         let sock = io.connect('ws://localhost:2333')
  7.         document.onclick=function(){
  8.           sock.emit()
  9.         }
  10.         sock.on('ttt',function(n){
  11.           console.log(`接到了服务器发送的${n}`)
  12.         })
  13.       </script>
  14.     </head>
  15.   </body>
  16. </html>

在小程序端调用请求

小程序websocket-api

  1.  localsession: function(data){
  2.    wx.connectSocket({
  3.      url: 'ws://localhost:8999'
  4.    })
  5.    wx.onSocketOpen(function (res) {
  6.      console.log('WebSocket连接已打开！')
  7.   setInterval(()=>{
  8.   wx.sendSocketMessage({
  9.     data: data,
  10.   })
  11. },3000)
  12.    })
  14.    wx.onSocketMessage(function (res) {
  15.      console.log(res)
  16.    })
  18.    wx.onSocketClose(function (res) {
  19.      console.log('WebSocket连接已关闭！')
  20.    })
  21.  },

WebSocket 与 Socket.IO

在vue中运用websocket

1.

vue-websocket

2.

vue-socket.io

3.

  1.  let ws = new WebSocket('ws://192.168.1.205:9032/websocket');
  2.         ws.onopen = () => {
  3.           // Web Socket 已连接上，使用 send() 方法发送数据
  4.           //console.log('数据发送中...')
  5.           //ws.send('Holle')
  6.           //console.log('数据发送完成')
  7.         }
  8.         ws.onmessage = evt => {
  9.           console.log('数据已接收...')
  10.           var received_msg = evt.data;
  11.           console.log(received_msg);
  13.           if("notice" == received_msg)
  14.           {
  15.             this.initData();
  16.             this.play();
  17.           }
  18.           else{
  19.             console.log("不刷新");
  20.           }
  21.         }
  22.        /* ws.onclose = function () {
  23.           // 关闭 websocket
  24.           console.log('连接已关闭...')
  25.         }
  26.         // 路由跳转时结束websocket链接
  27.         this.$router.afterEach(function () {
  28.           ws.close()
  29.         })*/

【node＋小程序＋web端】简单的websocket通讯的更多相关文章

  1. 小程序 web 端实时运行工具

    微信小程序 web 端实时运行工具 https://chemzqm.github.io/wept/

  2. 一套代码小程序&Web&Native运行的探索05——snabbdom

    接上文:一套代码小程序&Web&Native运行的探索04——数据更新 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/ma ...

  3. 一套代码小程序&Web&Native运行的探索03——处理模板及属性

    接上文:一套代码小程序&Web&Native运行的探索02 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  4. 一套代码小程序&Web&Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  5. 一套代码小程序&Web&Native运行的探索04——数据更新

    接上文:一套代码小程序&Web&Native运行的探索03 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tree/master/m ...

  6. uniapp之uni-starter小程序多端研发框架搭建与项目实践

    随着移动互联网的飞速发展,无数移动APP琳琅满目:在移动App的发展的基础上,衍生了小程序.轻应用技术,它随时可用,但又无需安装卸载.小程序是一种不需要下载安装即可使用的应用,它实现了应用" ...

  7. 一套代码小程序&Web&Native运行的探索06——组件系统

    接上文:一套代码小程序&Web&Native运行的探索05——snabbdom 对应Git代码地址请见:https://github.com/yexiaochai/wxdemo/tre ...

  8. java实现微信小程序服务端(登录)

    微信小程序如今被广泛使用,微信小程序按照微信官网的定义来说就是: 微信小程序是一种全新的连接用户与服务的方式,它可以在微信内被便捷地获取和传播,同时具有出色的使用体验. 这就是微信小程序的魅力所在,有 ...

  9. 微信小程序 wxs的简单应用

    Demo地址:微信小程序wxs的简单应用 案例分析 张三.李四.王五,各自分别都有数量不等的车,现在需要列表显示名字及他们拥有车的数量, list数据结构如下,当我们使用wx:for进行显示时,发现个 ...

随机推荐

  1. [Umbraco] 创建第一个页面

    如何创建一个页面,很简单. 进入settings,首先右键点击“Document Types”, 在出现的菜单点击"Create",在弹出的窗口中 Master Document ...

  2. 使用Dump转储文件排查线上环境服务未知问题

    利用Dump转储文件获取正式环境程序堆栈状态 服务异常找不到原因时,我们通常通过重新启动服务来尝试解决问题,但是在决定重启之前,请不要立刻重启Windows服务或站点 重启服务会让当前案发现场的内存证 ...

  3. Python numpy 中 keepdims 的含义

    keepdims主要用于保持矩阵的二维特性 import numpy as np a = np.array([[1,2],[3,4]]) # 按行相加,并且保持其二维特性 print(np.sum(a ...

  4. Java操作word文档使用JACOB和POI操作word,Excel,PPT需要的jar包

    可参考文档: http://wibiline.iteye.com/blog/1725492 下载jar包 http://download.csdn.net/download/javashixiaofe ...

  5. Windows下的Jdk 1.7*安装并配置（图文详解）

    不多说,直接上干货! 很多人很少去想,为什么在windows下,安装完Jdk的安装包之后,还需要去配置环境变量,只是知道要这么去做,没有想过为什么要去这么做? 答:由于java是平台无关的 ,安装jd ...

  6. 移动键盘 滚动input

    window.addEventListener('resize', function () { if(document.activeElement.tagName === 'INPUT'){ docu ...

  7. Linux系列：Ubuntu/fedora实用小技巧—禁止自动锁屏、设置免密码自动登录、免密码执行sudo操作

    首先声明:该文虽以Ubuntu 13.04为例,同样适用于Fedora 17(已测试),但在较低版本的Ubuntu下可能有所差异,具体看后面的注意事项. 技巧目录: 解决Ubuntu下每隔几分钟自动锁 ...

  8. IDEA SQL dialect detection和Duplicated Code检测关闭

    IDEA似乎做的太多,对于Mybatis文件中的SQL语法检查可能就没有太大的必要性,Duplicated Code检测其实非常好,但是我测试使用JDBC代码的时候一堆波浪线让我很不舒服 因此将这两个 ...

  9. java web 机试

    经过近一个月的学习,我们的java web已经学习完了. 这是我们这次的机试题. 一:题目 请利用MVC设计模式,并使用JSP.Servlet.JSTL和JQuery等技术实现动态条件的分页显示查询. ...

  10. laravel的seeder数据填充

    1.简介//Laravel 包含了一个简单方法来填充数据库——使用填充类和测试数据.所有的填充类都位于database/seeds目录.//填充类的类名完全由你自定义,但最好还是遵循一定的规则,比如可 ...