mirror of https://github.com/gorilla/websocket.git
Improve chat example
- Remove jQuery. - Rename Conn to Client to avoid confusion with underlying ws connection. - Remove global variables.
This commit is contained in:
Gary Burd
parent
a836c37014
commit
5e2e56d5df
|
|
@ -1,8 +1,8 @@
|
|||
# Chat Example
|
||||
|
||||
This application shows how to use use the
|
||||
[websocket](https://github.com/gorilla/websocket) package and
|
||||
[jQuery](http://jquery.com) to implement a simple web chat application.
|
||||
[websocket](https://github.com/gorilla/websocket) package to implement a simple
|
||||
web chat application.
|
||||
|
||||
## Running the example
|
||||
|
||||
|
|
@ -21,42 +21,71 @@ To use the chat example, open http://localhost:8080/ in your browser.
|
|||
|
||||
## Server
|
||||
|
||||
The server application is implemented with Go's [http](https://golang.org/pkg/net/http/) and the Gorilla [websocket](https://godoc.org/github.com/gorilla/websocket) package.
|
||||
The server application defines two types, `Client` and `Hub`. The server
|
||||
creates an instance of the `Client` type for each webscocket connection. A
|
||||
`Client` acts as an intermediary between the websocket connection and a single
|
||||
instance of the `Hub` type. The `Hub` maintains a set of registered clients and
|
||||
broadcasts messages to the clients.
|
||||
|
||||
The application defines two types, `Conn` and `Hub`. The server creates an instance of the `Conn` type for each webscocket connection. A `Conn` acts as an intermediary between the websocket and a single instance of the `Hub` type. The `Hub` maintains a set of registered connections and broadcasts messages to the connections.
|
||||
|
||||
The application runs one goroutine for the `Hub` and two goroutines for each `Conn`. The goroutines communicate with each other using channels. The `Hub` has channels for registering connections, unregistering connections and broadcasting messages. A `Conn` has a buffered channel of outbound messages. One of the connection's goroutines reads messages from this channel and writes the messages to the webscoket. The other connection goroutine reads messages from the websocket and sends them to the hub.
|
||||
The application runs one goroutine for the `Hub` and two goroutines for each
|
||||
`Client`. The goroutines communicate with each other using channels. The `Hub`
|
||||
has channels for registering clients, unregistering clients and broadcasting
|
||||
messages. A `Client` has a buffered channel of outbound messages. One of the
|
||||
client's goroutines reads messages from this channel and writes the messages to
|
||||
the webscoket. The other client goroutine reads messages from the websocket and
|
||||
sends them to the hub.
|
||||
|
||||
### Hub
|
||||
|
||||
The code for the `Hub` type is in [hub.go](https://github.com/gorilla/websocket/blob/master/examples/chat/hub.go).
|
||||
The code for the `Hub` type is in
|
||||
[hub.go](https://github.com/gorilla/websocket/blob/master/examples/chat/hub.go).
|
||||
The application's `main` function starts the hub's `run` method as a goroutine.
|
||||
Clients send requests to the hub using the `register`, `unregister` and
|
||||
`broadcast` channels.
|
||||
|
||||
The application's `main` function starts the hub's `run` method as a goroutine. Connections send requests to the hub using the `register`, `unregister` and `broadcast` channels.
|
||||
The hub registers clients by adding the client pointer as a key in the
|
||||
`clients` map. The map value is always true.
|
||||
|
||||
The hub registers connections by adding the connection pointer as a key in the `connections` map. The map value is always true.
|
||||
The unregister code is a little more complicated. In addition to deleting the
|
||||
client pointer from the `clients` map, the hub closes the clients's `send`
|
||||
channel to signal the client that no more messages will be sent to the client.
|
||||
|
||||
The unregister code is a little more complicated. In addition to deleting the connection pointer from the connections map, the hub closes the connection's `send` channel to signal the connection that no more messages will be sent to the connection.
|
||||
The hub handles messages by looping over the registered clients and sending the
|
||||
message to the client's `send` channel. If the client's `send` buffer is full,
|
||||
then the hub assumes that the client is dead or stuck. In this case, the hub
|
||||
unregisters the client and closes the websocket.
|
||||
|
||||
The hub handles messages by looping over the registered connections and sending the message to the connection's `send` channel. If the connection's `send` buffer is full, then the hub assumes that the client is dead or stuck. In this case, the hub unregisters the connection and closes the websocket.
|
||||
### Client
|
||||
|
||||
### Conn
|
||||
The code for the `Client` type is in [client.go](https://github.com/gorilla/websocket/blob/master/examples/chat/client.go).
|
||||
|
||||
The code for the `Conn` type is in [conn.go](https://github.com/gorilla/websocket/blob/master/examples/chat/conn.go).
|
||||
The `wsHandler` function is registered by the application's `main` function as
|
||||
an HTTP handler. The handler upgrades the HTTP connection to the WebSocket
|
||||
protocol, creates a client, registers the client with the hub and schedules the
|
||||
client to be unregistered using a defer statement.
|
||||
|
||||
An instance of the `wsHandler` type is registered by the application's `main` function as an HTTP handler. The handler upgrades the HTTP connection to the WebSocket protocol, creates a connection object, registers the connection with the hub and schedules the connection to be unregistered using a defer statement.
|
||||
Next, the HTTP handler starts the client's `writePump` method as a goroutine.
|
||||
This method transfers messages from the client's send channel to the websocket
|
||||
connection. The writer method exits when the channel is closed by the hub or
|
||||
there's an error writing to the websocket connection.
|
||||
|
||||
Next, the HTTP handler starts the connection's `writePump` method as a goroutine. This method transfers messages from the connection's send channel to the websocket. The writer method exits when the channel is closed by the hub or there's an error writing to the websocket.
|
||||
Finally, the HTTP handler calls the client's `readPump` method. This method
|
||||
transfers inbound messages from the websocket to the hub.
|
||||
|
||||
Finally, the HTTP handler calls the connection's `readPump` method. This method transfers inbound messages from the websocket to the hub.
|
||||
## Frontend
|
||||
|
||||
## Client
|
||||
The frontend code is in [home.html](https://github.com/gorilla/websocket/blob/master/examples/chat/home.html).
|
||||
|
||||
The code for the client is in [home.html](https://github.com/gorilla/websocket/blob/master/examples/chat/home.html).
|
||||
On document load, the script checks for websocket functionality in the browser.
|
||||
If websocket functionality is available, then the script opens a connection to
|
||||
the server and registers a callback to handle messages from the server. The
|
||||
callback appends the message to the chat log using the appendLog function.
|
||||
|
||||
The client uses [jQuery](http://jquery.com/) to manipulate objects in the browser.
|
||||
To allow the user to manually scroll through the chat log without interruption
|
||||
from new messages, the `appendLog` function checks the scroll position before
|
||||
adding new content. If the chat log is scrolled to the bottom, then the
|
||||
function scrolls new content into view after adding the content. Otherwise, the
|
||||
scroll position is not changed.
|
||||
|
||||
On document load, the script checks for websocket functionality in the browser. If websocket functionality is available, then the script opens a connection to the server and registers a callback to handle messages from the server. The callback appends the message to the chat log using the appendLog function.
|
||||
|
||||
To allow the user to manually scroll through the chat log without interruption from new messages, the `appendLog` function checks the scroll position before adding new content. If the chat log is scrolled to the bottom, then the function scrolls new content into view after adding the content. Otherwise, the scroll position is not changed.
|
||||
|
||||
The form handler writes the user input to the websocket and clears the input field.
|
||||
The form handler writes the user input to the websocket and clears the input
|
||||
field.
|
||||
|
|
|
|||
|
|
@ -37,26 +37,28 @@ var upgrader = websocket.Upgrader{
|
|||
WriteBufferSize: 1024,
|
||||
}
|
||||
|
||||
// Conn is an middleman between the websocket connection and the hub.
|
||||
type Conn struct {
|
||||
// Client is an middleman between the websocket connection and the hub.
|
||||
type Client struct {
|
||||
hub *Hub
|
||||
|
||||
// The websocket connection.
|
||||
ws *websocket.Conn
|
||||
conn *websocket.Conn
|
||||
|
||||
// Buffered channel of outbound messages.
|
||||
send chan []byte
|
||||
}
|
||||
|
||||
// readPump pumps messages from the websocket connection to the hub.
|
||||
func (c *Conn) readPump() {
|
||||
func (c *Client) readPump() {
|
||||
defer func() {
|
||||
hub.unregister <- c
|
||||
c.ws.Close()
|
||||
c.hub.unregister <- c
|
||||
c.conn.Close()
|
||||
}()
|
||||
c.ws.SetReadLimit(maxMessageSize)
|
||||
c.ws.SetReadDeadline(time.Now().Add(pongWait))
|
||||
c.ws.SetPongHandler(func(string) error { c.ws.SetReadDeadline(time.Now().Add(pongWait)); return nil })
|
||||
c.conn.SetReadLimit(maxMessageSize)
|
||||
c.conn.SetReadDeadline(time.Now().Add(pongWait))
|
||||
c.conn.SetPongHandler(func(string) error { c.conn.SetReadDeadline(time.Now().Add(pongWait)); return nil })
|
||||
for {
|
||||
_, message, err := c.ws.ReadMessage()
|
||||
_, message, err := c.conn.ReadMessage()
|
||||
if err != nil {
|
||||
if websocket.IsUnexpectedCloseError(err, websocket.CloseGoingAway) {
|
||||
log.Printf("error: %v", err)
|
||||
|
|
@ -64,22 +66,22 @@ func (c *Conn) readPump() {
|
|||
break
|
||||
}
|
||||
message = bytes.TrimSpace(bytes.Replace(message, newline, space, -1))
|
||||
hub.broadcast <- message
|
||||
c.hub.broadcast <- message
|
||||
}
|
||||
}
|
||||
|
||||
// write writes a message with the given message type and payload.
|
||||
func (c *Conn) write(mt int, payload []byte) error {
|
||||
c.ws.SetWriteDeadline(time.Now().Add(writeWait))
|
||||
return c.ws.WriteMessage(mt, payload)
|
||||
func (c *Client) write(mt int, payload []byte) error {
|
||||
c.conn.SetWriteDeadline(time.Now().Add(writeWait))
|
||||
return c.conn.WriteMessage(mt, payload)
|
||||
}
|
||||
|
||||
// writePump pumps messages from the hub to the websocket connection.
|
||||
func (c *Conn) writePump() {
|
||||
func (c *Client) writePump() {
|
||||
ticker := time.NewTicker(pingPeriod)
|
||||
defer func() {
|
||||
ticker.Stop()
|
||||
c.ws.Close()
|
||||
c.conn.Close()
|
||||
}()
|
||||
for {
|
||||
select {
|
||||
|
|
@ -90,8 +92,8 @@ func (c *Conn) writePump() {
|
|||
return
|
||||
}
|
||||
|
||||
c.ws.SetWriteDeadline(time.Now().Add(writeWait))
|
||||
w, err := c.ws.NextWriter(websocket.TextMessage)
|
||||
c.conn.SetWriteDeadline(time.Now().Add(writeWait))
|
||||
w, err := c.conn.NextWriter(websocket.TextMessage)
|
||||
if err != nil {
|
||||
return
|
||||
}
|
||||
|
|
@ -116,14 +118,14 @@ func (c *Conn) writePump() {
|
|||
}
|
||||
|
||||
// serveWs handles websocket requests from the peer.
|
||||
func serveWs(w http.ResponseWriter, r *http.Request) {
|
||||
ws, err := upgrader.Upgrade(w, r, nil)
|
||||
func serveWs(hub *Hub, w http.ResponseWriter, r *http.Request) {
|
||||
conn, err := upgrader.Upgrade(w, r, nil)
|
||||
if err != nil {
|
||||
log.Println(err)
|
||||
return
|
||||
}
|
||||
conn := &Conn{send: make(chan []byte, 256), ws: ws}
|
||||
hub.register <- conn
|
||||
go conn.writePump()
|
||||
conn.readPump()
|
||||
client := &Client{hub: hub, conn: conn, send: make(chan []byte, 256)}
|
||||
client.hub.register <- client
|
||||
go client.writePump()
|
||||
client.readPump()
|
||||
}
|
||||
|
|
@ -2,49 +2,53 @@
|
|||
<html lang="en">
|
||||
<head>
|
||||
<title>Chat Example</title>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
$(function () {
|
||||
window.onload = function () {
|
||||
var conn;
|
||||
var msg = $("#msg");
|
||||
var log = $("#log");
|
||||
var msg = document.getElementById("msg");
|
||||
var log = document.getElementById("log");
|
||||
|
||||
function appendLog(msg) {
|
||||
var d = log[0];
|
||||
var doScroll = d.scrollTop === d.scrollHeight - d.clientHeight;
|
||||
msg.appendTo(log);
|
||||
function appendLog(item) {
|
||||
var doScroll = log.scrollTop === log.scrollHeight - log.clientHeight;
|
||||
log.appendChild(item);
|
||||
if (doScroll) {
|
||||
d.scrollTop = d.scrollHeight - d.clientHeight;
|
||||
log.scrollTop = log.scrollHeight - log.clientHeight;
|
||||
}
|
||||
}
|
||||
|
||||
$("#form").submit(function () {
|
||||
document.getElementById("form").onsubmit = function () {
|
||||
if (!conn) {
|
||||
return false;
|
||||
}
|
||||
if (!msg.val()) {
|
||||
if (!msg.value) {
|
||||
return false;
|
||||
}
|
||||
conn.send(msg.val());
|
||||
msg.val("");
|
||||
conn.send(msg.value);
|
||||
msg.value = "";
|
||||
return false;
|
||||
});
|
||||
};
|
||||
|
||||
if (window["WebSocket"]) {
|
||||
conn = new WebSocket("ws://{{$}}/ws");
|
||||
conn.onclose = function (evt) {
|
||||
appendLog($("<div><b>Connection closed.</b></div>"));
|
||||
var item = document.createElement("div");
|
||||
item.innerHTML = "<b>Connection closed.</b>";
|
||||
appendLog(item);
|
||||
};
|
||||
conn.onmessage = function (evt) {
|
||||
var messages = evt.data.split('\n')
|
||||
var messages = evt.data.split('\n');
|
||||
for (var i = 0; i < messages.length; i++) {
|
||||
appendLog($("<div/>").text(messages[i]));
|
||||
var item = document.createElement("div");
|
||||
item.innerText = messages[i];
|
||||
appendLog(item);
|
||||
}
|
||||
};
|
||||
} else {
|
||||
appendLog($("<div><b>Your browser does not support WebSockets.</b></div>"));
|
||||
var item = document.createElement("div");
|
||||
item.innerHTML = "<b>Your browser does not support WebSockets.</b>";
|
||||
appendLog(item);
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style type="text/css">
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -4,46 +4,48 @@
|
|||
|
||||
package main
|
||||
|
||||
// hub maintains the set of active connections and broadcasts messages to the
|
||||
// connections.
|
||||
// hub maintains the set of active clients and broadcasts messages to the
|
||||
// clients.
|
||||
type Hub struct {
|
||||
// Registered connections.
|
||||
connections map[*Conn]bool
|
||||
// Registered clients.
|
||||
clients map[*Client]bool
|
||||
|
||||
// Inbound messages from the connections.
|
||||
// Inbound messages from the clients.
|
||||
broadcast chan []byte
|
||||
|
||||
// Register requests from the connections.
|
||||
register chan *Conn
|
||||
// Register requests from the clients.
|
||||
register chan *Client
|
||||
|
||||
// Unregister requests from connections.
|
||||
unregister chan *Conn
|
||||
// Unregister requests from clients.
|
||||
unregister chan *Client
|
||||
}
|
||||
|
||||
var hub = Hub{
|
||||
broadcast: make(chan []byte),
|
||||
register: make(chan *Conn),
|
||||
unregister: make(chan *Conn),
|
||||
connections: make(map[*Conn]bool),
|
||||
func newHub() *Hub {
|
||||
return &Hub{
|
||||
broadcast: make(chan []byte),
|
||||
register: make(chan *Client),
|
||||
unregister: make(chan *Client),
|
||||
clients: make(map[*Client]bool),
|
||||
}
|
||||
}
|
||||
|
||||
func (h *Hub) run() {
|
||||
for {
|
||||
select {
|
||||
case conn := <-h.register:
|
||||
h.connections[conn] = true
|
||||
case conn := <-h.unregister:
|
||||
if _, ok := h.connections[conn]; ok {
|
||||
delete(h.connections, conn)
|
||||
close(conn.send)
|
||||
case client := <-h.register:
|
||||
h.clients[client] = true
|
||||
case client := <-h.unregister:
|
||||
if _, ok := h.clients[client]; ok {
|
||||
delete(h.clients, client)
|
||||
close(client.send)
|
||||
}
|
||||
case message := <-h.broadcast:
|
||||
for conn := range h.connections {
|
||||
for client := range h.clients {
|
||||
select {
|
||||
case conn.send <- message:
|
||||
case client.send <- message:
|
||||
default:
|
||||
close(conn.send)
|
||||
delete(h.connections, conn)
|
||||
close(client.send)
|
||||
delete(h.clients, client)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,7 @@ var addr = flag.String("addr", ":8080", "http service address")
|
|||
var homeTemplate = template.Must(template.ParseFiles("home.html"))
|
||||
|
||||
func serveHome(w http.ResponseWriter, r *http.Request) {
|
||||
log.Println(r.URL)
|
||||
if r.URL.Path != "/" {
|
||||
http.Error(w, "Not found", 404)
|
||||
return
|
||||
|
|
@ -29,9 +30,12 @@ func serveHome(w http.ResponseWriter, r *http.Request) {
|
|||
|
||||
func main() {
|
||||
flag.Parse()
|
||||
hub := newHub()
|
||||
go hub.run()
|
||||
http.HandleFunc("/", serveHome)
|
||||
http.HandleFunc("/ws", serveWs)
|
||||
http.HandleFunc("/ws", func(w http.ResponseWriter, r *http.Request) {
|
||||
serveWs(hub, w, r)
|
||||
})
|
||||
err := http.ListenAndServe(*addr, nil)
|
||||
if err != nil {
|
||||
log.Fatal("ListenAndServe: ", err)
|
||||
|
|
|
|||
Loading…
Reference in New Issue