首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >真简单:史上最小websocket协议Demo,看一遍就记住了!

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

作者头像
程序员小助手
发布2020-04-08 14:47:59
8440
发布2020-04-08 14:47:59
举报
文章被收录于专栏:程序员小助手程序员小助手

前言

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.gopackage main

import (
	"io"
	"net/http"

	"golang.org/x/net/websocket")func resp(ws *websocket.Conn) {
	io.Copy(ws, ws)}func main() {
	http.Handle("/echo", websocket.Handler(resp))
	http.Handle("/", http.FileServer(http.Dir(".")))
	err := http.ListenAndServe(":8090", nil)
	if err != nil {
		panic("ListenAndServe: " + err.Error())
	}}

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

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

go run main.go

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

websocket客户端

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

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

<!DOCTYPE html><html>
	<head>
		<meta charset="UTF-8" />
		<title>Sample of websocket with golang</title>
		<script src="jquery-2.1.4.min.js"></script>
		<script>
      $(function() {
        var ws = new WebSocket("ws://localhost:8090/echo");
        ws.onmessage = function(e) {
          console.log("收到:" + event.data);
        };

        var $ul = $('#msg-list');
        $('#sendBtn').click(function(){
          var data = $('#name').val();
          ws.send(data);
          console.log("发送:" + data);
          $('<li>').text(data).appendTo($ul);
        });
      });
		</script>
	</head>
	<body>
			<input id="name" type="text" />
			<input type="button" id="sendBtn" value="send"></input>
      <ul id="msg-list"></ul>
	</body></html>

结合起来

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

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

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

结语

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

Happy coding :-)

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-03-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 程序员小助手 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • HTTP
  • Ajax轮询
  • Long poll
  • websocket
  • Go语言写一个demo
  • websocket客户端
  • 结合起来
  • 结语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档