server.go

package main

import (
	"database/sql"
	"fmt"
	"github.com/go-gorp/gorp"
	_ "github.com/mattn/go-sqlite3"
	"golang.org/x/net/websocket"
	"log"
	"net/http"
	"sync"
)

type Picture struct {
	Id   int64
	Data []byte
	Name string
	Type string
}

var (
	conns   = map[*websocket.Conn]bool{}
	mutex   sync.Mutex
	photodb = "./db/photo.sqlite3"
	debug   = false
	dbmap   *gorp.DbMap
)

func main() {
	http.Handle("/", http.FileServer(http.Dir(".")))
	http.Handle("/chat", websocket.Handler(dataReceive))
	fmt.Println(":8249")
	if err := http.ListenAndServe(":8249", nil); err != nil {
		log.Fatal("ListenAndServe: " + err.Error())
	}
}

func initDb() (*gorp.DbMap, error) {
	db, err := sql.Open("sqlite3", photodb)
	if err != nil {
		return nil, err
	}
	dbmap = &gorp.DbMap{Db: db, Dialect: gorp.SqliteDialect{}}
	dbmap.AddTableWithName(Picture{}, "picture").SetKeys(true, "Id")
	err = dbmap.CreateTablesIfNotExists()
	if err != nil {
		return nil, err
	}
	return dbmap, nil
}

func insertPic(pic *Picture) error {
	var err error
	if dbmap == nil {
		dbmap, err = initDb()
		if err != nil {
			return err
		}
	}
	return dbmap.Insert(pic)
}

func dataReceive(conn *websocket.Conn) {
	mutex.Lock()
	conns[conn] = true
	mutex.Unlock()

	defer func() {
		mutex.Lock()
		delete(conns, conn)
		mutex.Unlock()
	}()

	for {
		var b Picture
		if err := websocket.JSON.Receive(conn, &b); err != nil {
			if debug {
				fmt.Println(b)
			}
			log.Println("Receive error:", err)
			break
		}
		if err := insertPic(&b); err != nil {
			log.Println(err)
			continue
		}
		mutex.Lock()
		for c := range conns {
			c := c
			go func() {
				if err := websocket.JSON.Send(c, b); err != nil {
					log.Println("Send error:", err)
				}
			}()
		}
		mutex.Unlock()
	}
}

websocket_json.js

(function() {
  var ws = new WebSocket("ws://localhost:8249/chat")
  ws.onerror = function(err) {
      console.error("Error: " + err);
  }

  ws.onmessage = function(e) {
      console.log("Received");
      var o = JSON.parse(e.data);
      var bytes = atob(o.Data.replace(/^.*,/, ''));
      var b = new Uint8Array(o.Data.length);
      for (var n = 0; n < o.Data.length; n++) {
          b[n] = bytes.charCodeAt(n);
      }
      var blob = new Blob([b.buffer], {type: o.Type});
      var url = URL.createObjectURL(blob);
      document.getElementById("hello").src = url;
  }

  var f = document.getElementById("file");
  f.onchange = function() {
    var file = this.files[0];
    var fr = new FileReader();
    fr.onload = function(e) {
        var data = e.target.result;
        var b64 = data.slice(data.indexOf(",") + 1);
        var s = {"Name": file.name, "Data": b64, "Type": file.type};
        console.log(JSON.stringify(s));
        ws.send(JSON.stringify(s));
    }
    fr.readAsDataURL(file);
  }
})()