首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

真简单:史上最小websocket协议Demo,看一遍就记住了!

前言

websocket是HTML5才出现的通讯协议,与HTTP协议不同,只是为了兼容现有浏览器的握手规范,也就是说它是HTTP协议上的一种补充。

HTTP

HTTP1.0,很简单,握手通过,一个request,一个response,结束。

HTTP2.0,握手通过,使用keep-alive,可以多个request,有多个response。

本质都是一样的,请求 = 响应,一一对应。

有同学不禁要问,我用 http long poll,或者 ajax 轮询,不是一样的吗?还要什么websocket?

Ajax轮询

一般就是定时发起请求,不管什么状况,间隔时间就发起request。好比下面的对话:

Ajax:饭好了吗?

Srv:没有;

Ajax:饭好了吗?

Srv:没有;

Ajax:饭好了吗?

Srv:好了;

Ajax:饭好了吗?

Srv:好了;

Ajax:饭好了吗?

Srv:好了,问了八百遍了,好了;

Long poll

跟ajax轮询差不多,不过这个是阻塞型,拿不到response不停。好比下面的对话:

Poll:饭好了吗?

Srv:没有……(洗菜,切菜,点火,炒菜,翻锅)……好了,拿去。

Poll:好开心,饭好了。

websocket

讲了两个HTTP,终于轮到websocket了。

相对于HTTP的被动式响应,websocket可以给客户端推送消息。好比下面的对话:

WS:我要建websocket连接,需要服务:food,websocket协议 17 (HTTP Request)。

Srv:OK,确认升级为websocket协议。

WS:饭好了告诉我一声。

Srv:米饭好了。

Srv:菜好了。

Srv:碗筷好了。

Srv:可以吃了了。

Srv:巴拉巴拉巴拉。

大家看到了吧,这种协议的好处就是,资源利用率提高了,服务端可以按需推送消息了,不必等客户端请求才发送。

Go语言写一个demo

我们写一个最小,最简单的demo,演示一个提供websocket服务的服务器。

代码如下:

// main.gopackagemain

import(

"io"

"net/http"

"golang.org/x/net/websocket")funcresp(ws*websocket.Conn){

io.Copy(ws,ws)}funcmain(){

http.Handle("/echo",websocket.Handler(resp))

http.Handle("/",http.FileServer(http.Dir(".")))

err:=http.ListenAndServe(":8090",nil)

iferr!=nil{

panic("ListenAndServe: "+err.Error())

}}

这就是服务器端全部的代码,是不是超级简单?

不用编译,直接在命令行运行

go run main.go

那么就有一个websocket服务器监听在 8090 端口了。

websocket客户端

有了服务器,我们再准备一个客户端页面,测试一下连接情况。

使用jquery把收到的信息动态展示在页面上。在console控制台打印接收和发送的数据。

Sample of websocket with golang

$(function(){

varws=newWebSocket("ws://localhost:8090/echo");

ws.onmessage=function(e){

console.log("收到:"+event.data);

};

var$ul=$('#msg-list');

$('#sendBtn').click(function(){

vardata=$('#name').val();

ws.send(data);

console.log("发送:"+data);

$('

').text(data).appendTo($ul);

});

});

结合起来

本地浏览器打开index.html文件,并发送一些测试数据如下图。

使用按钮发送输入框内容,服务器接到后,原封不动返回。

js使用WebSocket建立通信,并在控制台打印收到的内容。

结语

相信通过Ajax,Long Poll,和websocket的对比,大家对websocket的作用原理,和使用方法,会有一个较为清晰的理解了。

Happy coding :-)

【本文由@程序员小助手发布,持续分享编程故事,欢迎关注】

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20200318A0TUCU00?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券