首页 > 其他分享 >websockets html5 全双工通信

websockets html5 全双工通信

时间:2022-08-23 21:59:21浏览次数:50  
标签:socket err nil ws html5 全双工 message websockets


常见传输协议  不够全面会陆续补充

协议 链接 面向 默认端口 备注
HTTP TCP链接 网页 80 超文本传输协议
FTP TCP链接 文件 21 文件传输协议
WebSockets TCP链接(单个链接全双工通信) 数据 80 html5 客户端和服务端全双工通信
wss     443  

 

WebSockets 应用

server 端代码,语言go

package wsApi

import (
	"fmt"
	"net/http"

	"github.com/gin-gonic/gin"
	"github.com/gorilla/websocket"
)

var upGrader = websocket.Upgrader{
	CheckOrigin: func(r *http.Request) bool {
		return true
	},
}

func Ping(c *gin.Context) {
	fmt.Println(123333);
	ws, err := upGrader.Upgrade(c.Writer, c.Request, nil)
	if err != nil {
		return
	}
	defer ws.close()
	for {
		//读取ws中的数据
		mt, message, err := ws.ReadMessage()
		if err != nil {
			break
		}
		//如果发送的信息是ping则返回pong
		if string(message) == "ping" {
			message = []byte("pong")
		}
		//写入ws数据  向前端返回数据
		err = ws.WriteMessage(mt, message)
		if err != nil {
			break
		}
	}
}

 client 端代码

startWS(){
      if(window.WebSocket){
        let socket = new WebSocket('ws://localhost:8081/wsapi');
        socket.onopen = () => {
          socket.send('hhahahahah')
        }
        socket.onmessage = (evt) => {
          var received_msg = evt.data;
          console.log("数据已接收...", received_msg);
        }
        socket.onclose = function(){ 
          // 关闭 websocket
          console.log("连接已关闭..."); 
        };
      }
    },

  

标签:socket,err,nil,ws,html5,全双工,message,websockets
From: https://www.cnblogs.com/bky-1/p/16617956.html

相关文章

  • Day11-HTML5
    H5新增标签:H5新增的语义化标签:(双标记) 1.header整个页面的头部 2.main主要部分ie不兼容 3.section页面中的一个区块 4.footer结尾区 5.nav导航链接 6.art......
  • HTML5摇一摇以及音频播放问题优化总结
    1.摇一摇不够灵敏、摇动很多次没有响应的问题、原来摇一摇代码是从网络Copy的,活动上线后,发现部分手机摇一摇监测效果不够灵敏,摇动很多次都没有响应,恨不得把手机砸了,于是优......
  • 如何給html5的video的src地址不以明文方式顯示,以防止下載
    chrome:chrome的video標籤支持srcredirect。<videoid="video"src="{:U('/Portal/Video/token')}"autoplay="true"controlstype="video/mp4"class="videoplayer"po......
  • HTML5中datalist的用法
    <datalist>控件可以为输入框提供一些备选选项,当用户输入的内容与备选选项文字相同时,将会显示智能感应注:此时的option为单标签<inputtype='text'list='province-list'......
  • HTML4与HTML5中label标签的不同用法
    label标签:用来将文字和单选或者多选按钮进行绑定。 html4中label标签需要通过for和id配合使用:<inputtype='radio'id='nan'/><labelfor='nan'>男</label> html......
  • 前端 | HTML5基础知识
    1HTML定义HTML(英文HyperTextMarkupLanguage的缩写)中文译为“超文本标签语言”,主要是通过HTML标签对网页中的文本、图片、声音等内容进行描述。<strong>加粗字体</s......