示例代码
默认go的socket.io包是不跨域的,网上很多示例,包括官方的,都没有跨域的解决方式,最后,在GitHub上看到这个解决方案,亲测可行,记录一下。
package main
import (
"fmt"
"github.com/googollee/go-socket.io/engineio"
"github.com/googollee/go-socket.io/engineio/transport"
"github.com/googollee/go-socket.io/engineio/transport/polling"
"github.com/googollee/go-socket.io/engineio/transport/websocket"
"log"
"net/http"
"time"
socketIo "github.com/googollee/go-socket.io"
)
func main() {
//必须有这一段,否则跨域请求统统失败,这个函数的意思是允许跨域
allowOrigin := func(r *http.Request) bool {
return true
}
server, _ := socketIo.NewServer(&engineio.Options{
Transports: []transport.Transport{
&polling.Transport{
Client: &http.Client{
Timeout: time.Minute,
},
CheckOrigin: allowOrigin,
},
&websocket.Transport{
CheckOrigin: allowOrigin,
},
},
})
server.OnConnect("/", func(s socketIo.Conn) error {
s.SetContext("")
fmt.Println("connected:", s.ID())
return nil
})
server.OnEvent("/", "notice", func(s socketIo.Conn, msg string) {
fmt.Println("notice:", msg)
s.Emit("reply", "have "+msg)
})
server.OnEvent("/", "imei", func(s socketIo.Conn, msg interface{}) {
//types := reflect.TypeOf(msg)
fmt.Println("imei:", msg)
switch msg.(type) {
case string:
panic("sdfdsf")
case map[string]interface{}:
fmt.Println("imei:", msg.(map[string]interface{})["imei"])
default:
panic("dd")
}
s.Emit("imei", "have ")
})
server.OnEvent("/chat", "msg", func(s socketIo.Conn, msg string) string {
s.SetContext(msg)
return "recv " + msg
})
server.OnEvent("/", "bye", func(s socketIo.Conn) string {
last := s.Context().(string)
s.Emit("bye", last)
err := s.Close()
if err != nil {
panic("exception")
}
return last
})
server.OnError("/", func(s socketIo.Conn, e error) {
fmt.Println("meet error:", e)
})
server.OnDisconnect("/", func(s socketIo.Conn, reason string) {
fmt.Println("closed", reason)
})
go func() {
err := server.Serve()
fmt.Println(err)
}()
defer func() {
err := server.Close()
fmt.Println(err)
}()
http.Handle("/socket.io/", server)
http.Handle("/", http.FileServer(http.Dir("../asset")))
log.Println("Serving at localhost:8000...")
log.Fatal(http.ListenAndServe(":8000", nil))
}
#检查是否存在必要扩展
if (extension_loaded('gd')) {
//放大倍数
$pix = 4;
//加粗倍数
$bold = 2;
// 1.创建画布
$im = imagecreatetruecolor(140 * $pix, 210 * $pix);
//2. 修改画布默认填充色为白色
$white = imagecolorallocate($im, 255, 255, 255);
imagefill($im, 0, 0, $white);
//创建一个颜色
$black = imagecolorallocate($im, 0, 0, 0);
$red = imagecolorallocate($im, 255, 0, 0);
//矩形
// imagerectangle($im,2,2,40,50,$red);
//从数据库拿数据
$data = $this->getDrawData();
// dump($data);
// foreach ()
//画点
foreach ($data as $v) {
//绘制一个点
imagesetpixel($im, $v['x'] * $pix, $v['y'] * $pix, $black);
//绘制一个圆,相当于加粗之前的点
imageellipse($im, $v['x'] * $pix, $v['y'] * $pix, $bold, $bold, $black);
}
//3.输出图像到网页,也可以另存
ob_start();
imagepng($im);
$content = ob_get_clean();
//4.销毁该图片(释放内存--服务器内存)
imagedestroy($im);
return response($content, 200, ['Content-Length' => strlen($content)])->contentType('image/png');
}
前端动画的开发一直是我所热衷探索与研究的内容,本文将描述什么是拟真的动画效果,目前所流行的 React 动画库,以及一些基于 framer-motion 动画库的 demos。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
截至目前,学习了官方的这么多 hooks api,我们也可以创造一些自己的 hooks,甚至官方也在鼓励开发者将组件逻辑抽象到自定义 hooks 中,方便复用。
自定义 Hook 是一个函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。
通过自定义 Hook,可以将组件逻辑提取到可重用的函数中。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
接下来我们要一起学习 useRef hook,它可以让我们直接访问到组件中的的 Dom 节点。我们今天通过一个 input 输入框获取焦点的需求为例,来学习一下 useRef。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
上一章,我们学习了 useCallback 来进行性能优化,关于性能优化还有另一个 hook api,那就是 useMemo,下面我们一起通过一个例子来看看。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
在我们开始深入学习 useCallback 前,先回顾一下性能优化相关的内容,这将有助于我们理解什么是 useCallback,为什么使用它,以及怎么使用它。
依然先从一个组件多次被复用的代码场景看起。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
截止目前我们已经学习了3个hook api,useState
, useEffect
, useContext
。接下来我们学习下一个 hook api,useReducer
。首先我们将讲讲什么是 reducer,以及为什么使用 reducer。研究一下 JavaScript 中的 reducer 是什么,这将有助于理解 react hook 中的 useReducer
。好,现在开始吧。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
今天我们讲讲 Context 对象和 useContext 的使用方法。
掌握 React Hooks api 将更好的帮助你在工作中使用,对 React 的掌握更上一层楼。本系列将使用大量实例代码和效果展示,非常易于初学者和复习使用。
今天我们讲讲 useEffect 的使用方法。