WebSocket为了保持客户端、服务端的实时双向通信,需要确保客户端、服务端之间的TCP通道保持连接没有断开。然而,对于长时间没有数据往来的连接,如果依旧长时间保持着,可能会浪费包括的连接资源。
package main
import (
"log"
"net/http"
"github.com/gorilla/websocket"
var clients = make(map[*websocket.Conn]bool) // connected clients
var broadcast = make(chan Message) // broadcast channel
// Configure the upgrader
var upgrader = websocket.Upgrader{
CheckOrigin: func(r *http.Request) bool {
return true
// Define our message object
type Message struct {
Email string `json:"email"`
Username string `json:"username"`
Message string `json:"message"`
func main() {
// Create a simple file server
fs := http.FileServer(http.Dir("../public"))
http.Handle("/", fs)
// Configure websocket route
http.HandleFunc("/ws", handleConnections)
// Start listening for incoming chat messages
go handleMessages()
// Start the server on localhost port 8000 and log any errors
log.Println("http server started on :8000")
err := http.ListenAndServe(":8000", nil)
if err != nil {
log.Fatal("ListenAndServe: ", err)
func handleConnections(w http.ResponseWriter, r *http.Request) {
// Upgrade initial GET request to a websocket
ws, err := upgrader.Upgrade(w, r, nil)
if err != nil {
log.Fatal(err)
// Make sure we close the connection when the function returns
defer ws.Close()
// Register our new client
clients[ws] = true
for {
var msg Message
// Read in a new message as JSON and map it to a Message object
err := ws.ReadJSON(&msg)
if err != nil {
log.Printf("error: %v", err)
delete(clients, ws)
break
// Send the newly received message to the broadcast channel
broadcast <- msg
func handleMessages() {
for {
// Grab the next message from the broadcast channel
msg := <-broadcast
// Send it out to every client that is currently connected
for client := range clients {
err := client.WriteJSON(msg)
if err != nil {
log.Printf("error: %v", err)
client.Close()
delete(clients, client)
new Vue({
el: '#app',
data: {
ws: null, // Our websocket
newMsg: '', // Holds new messages to be sent to the server
chatContent: '', // A running list of chat messages displayed on the screen
email: null, // Email address used for grabbing an avatar
username: null, // Our username
joined: false // True if email and username have been filled in
created: function() {
var self = this;
this.ws = new WebSocket('ws://' + window.location.host + '/ws');
this.ws.addEventListener('message', function(e) {
var msg = JSON.parse(e.data);
self.chatContent += '<div class="chip">'
+ '<img src="' + self.gravatarURL(msg.email) + '">' // Avatar
+ msg.username
+ '</div>'
+ emojione.toImage(msg.message) + '<br/>'; // Parse emojis
var element = document.getElementById('chat-messages');
element.scrollTop = element.scrollHeight; // Auto scroll to the bottom
methods: {
send: function () {
if (this.newMsg != '') {
this.ws.send(
JSON.stringify({
email: this.email,
username: this.username,
message: $('<p>').html(this.newMsg).text() // Strip out html
this.newMsg = ''; // Reset newMsg
join: function () {
if (!this.email) {
Materialize.toast('You must enter an email', 2000);
return
if (!this.username) {
Materialize.toast('You must choose a username', 2000);
return
this.email = $('<p>').html(this.email).text();
this.username = $('<p>').html(this.username).text();
this.joined = true;
gravatarURL: function(email) {
return 'http://www.gravatar.com/avatar/' + CryptoJS.MD5(email);
具体使用什么技术是需要根据使用场景进行选择的,在这里我为大家总结了http和websocket不同的使用场景,请大家参考。
HTTP :
检索资源(Retrieve Resource)
高度可缓存的资源(Highly Cacheable Resource)
幂等性和安全性(Idempotency and Safety)
错误方案(Error Scenarios)
websockt
快速响应时间(Fast Reaction Time)
持续更新(Ongoing Updates)
Ad-hoc消息传递(Ad-hoc Messaging)
错误的HTTP应用场景
依赖于客户端轮询服务,而不是由用户主动发起。
需要频繁的服务调用来发送小消息。
客户端需要快速响应对资源的更改,并且,无法预测更改何时发生。
错误的WebSockets应用场景
连接仅用于极少数事件或非常短的时间,客户端无需快速响应事件。
需要一次打开多个WebSockets到同一服务。
打开WebSocket,发送消息,然后关闭它 - 然后再重复该过程。
消息传递层中重新实现请求/响应模式。
以上内容都是我自己的一些感想,分享出来欢迎大家指正,顺便求一波关注,有问题的或者更好的想法的小伙伴可以评论私信我哦~或者
点击
Java学习交流群
一起交流聊天!