当前位置: 首页 > news >正文

远程服务和web服务和前端,三方通过socket和websocket进行双向通信传输数据

1. 什么是socket?

在计算机通信领域,socket 被翻译为“套接字”,它是计算机之间进行通信的一种约定或一种方式。通过 socket 这种约定,一台计算机可以接收其他计算机的数据,也可以向其他计算机发送数据。

2. 什么是websocket?

WebSocket是一种网络通信协议,是HTML5新增的特性,实现了基于浏览器的远程socket,使浏览器和服务器可以进行全双工通信。

3. 要实现什么样的效果?

  • socket服务端和web服务端实现数据双向通信。socket服务端可以是任何语言实现(c++、java、php、go等),任何部署方式(本机、远程)

  • web服务端(go 实现)和前端通过websocket实现数据双向通信.

  • socket服务、web服务、前端实现数据双向通信。

    前端通过websocket发送数据给web服务 -》 web服务 -》 web服务将数据通过socket推送给远程服务端

    远程服务通过socket将数据推送给web服务 -》 web服务 -》 web服务将数据通过websocket推送给前端

    远程服务和前端即使数据发送者也是接收者。

    web服务是数据中转战。(也可以处理业务需求)

4. 如何实现?

在实现三方通信数据双向通信之前,先实现

  1. 远程服务与web服务之间通过socket进行全双工通信
  2. web服务通过websocket将数据主动推送给前端并接收前端发来的数据

1. 远程服务与web服务之间通过socket进行全双工通信

socket服务可用其他任何语言实现(c++、java、php等)。这里采用go

server: 远程服务

  1. 监听
listener, err := net.Listen("tcp", "127.0.0.1:5412")
  1. 建立连接
conn, err := listener.Accept()
  1. 读 (注意: 如果数据太长,需要分片处理)
reader := bufio.NewReader(os.Stdin)
fmt.Print("请输入服务端发送的数据:")
sendinfo, err := reader.ReadString('\n')
if err != nil {fmt.Println("读取服务端要发送的数据出错!")continue
}
  1. 写入
sendinfo = strings.TrimSpace(sendinfo)
if sendinfo == "exit" {fmt.Println("退出服务端")return
}
conn.Write([]byte(sendinfo))

client: web服务

  1. 连接
conn, err := net.Dial("tcp", "127.0.0.1:5412")
for {n, err := conn.Read(buffer[:])if err != nil {fmt.Println("客户端读取socket服务端数据出错")break}fmt.Println("客户端读取socket数据是:", string(buffer[:n]))
}
  1. 写入
fmt.Print("请输入要发送给socket服务端的数据: ")
msg, err := reader.ReadString('\n')
if err != nil {fmt.Println("读取客户端要发送的数据出错!")return
}
msg = strings.TrimSpace(msg)
if msg == "exit" {fmt.Println("退出socket客户端")return
}
conn.Write([]byte(msg))

2. web服务基于websocket和前端通信

web服务

  1. 升级HTTP
ar upgrader = websocket.Upgrader{ReadBufferSize:  1024,WriteBufferSize: 1024,CheckOrigin: func(r *http.Request) bool {return true},
}ws, err = upgrader.Upgrade(w, r, nil)
func read() {for {_, p, err := ws.ReadMessage()if err != nil {log.Println(err)return}log.Println("Received message:", string(p))}
}
func write() {reader := bufio.NewReader(os.Stdin)for {fmt.Println("请输入要发送给socket服务端的数据: ")msg, err := reader.ReadString('\n')err = ws.WriteMessage(websocket.TextMessage, []byte(msg))if err != nil {log.Println(err)return}}
}

前端

var input = document.getElementById("input");
var output = document.getElementById("output");
var socket = new WebSocket("ws://localhost:1234");socket.onopen = function () {output.innerHTML += "Status: Connected\n";
};socket.onmessage = function (e) {output.innerHTML += "Server: " + e.data + "\n";
};function send() {socket.send(input.value);input.value = "";
}

3. 三方双向通信

实现了第一步和第二步就可以实现第三步,将第一步和第二步的代码进行合并即可。

唯一不同这里定义里两个无缓冲的通道.

  • 前端将数据发送给web服务,web服务拿到数据写入chanMess中。在web服务和远程服务通信期间,就可以读chanMess中的数据,然后将数据推送给远程服务

  • 远程服务将数据推送给web服务,web服务拿到数据写入socketMess中。在web服务和前端通信期间,就可以读socketMess中的数据,然后将数据推送给前端

var chanMess    = make(chan []byte) // 存储 websocket数据
var socketMess  = make(chan []byte) // 存储 socket数据

4. 完整代码可以私聊获取

http://www.lryc.cn/news/90115.html

相关文章:

  • Linux 网络基础(2)应用层(http/https协议、请求格式、响应格式、session、cookie、加密传输)
  • 解决sshfs挂载报错
  • 由于过多的连接错误而被 MySQL服务器 阻止
  • Go语言实现JDBC
  • ubuntu修改环境变量的几种方法
  • 基于html+css的图展示95
  • 数据库基础——5.运算符
  • JMeter 性能测试基本过程及示例
  • 漏洞复现 CVE-2018-2894 weblogic文件上传
  • 二叉树:填充每个节点的下一个右侧节点指针(java)
  • Android 12.0修改系统默认设备类型的平板电脑类型为设备类型
  • debug研究
  • zabbix监控系统
  • Python入门学习
  • 自动驾驶嵌入式开发工程师:车载SOC开发修炼秘籍
  • Linux之搭建环境
  • 泡利矩阵(一)
  • 通用支付系统设计
  • metaRTC+ZLMediaKit实现webrtc的推拉流
  • 【JavaSE】Java基础语法(八)
  • Java如何配置环境变量
  • android 12.0SystemUI 状态栏下拉快捷添加截图快捷开关
  • 【无标题】 Vue 路由库Router 【重点】 - 安装 - 基本使用 - 路由配置 - 路由模式 - 路由传递参数 - 路由内置对象 - 路由守卫
  • RocksDB笔记 -- 整体架构
  • 设计模式之单例模式入门介绍
  • RHCE 作业三
  • 90.qt qml-Table表格组件(支持表头表尾固定/自定义颜色/自定义操作按钮/插入排序)
  • android 12.0SystemUI屏蔽某个app的通知
  • 注意力机制(一)SE模块(Squeeze-and-Excitation Networks)论文总结和代码实现
  • L2-001 紧急救援(dijkstra算法练习)