WebSocket是一个能让能让客户端和服务端数据交换更加方便的一个技术，它允许服务端向客户端主动发送数据。
在此技术之前有一个叫做ajax轮询的技术，这个技术就是每隔特殊的时间段就向服务端发送一个请求（感觉跟定时查询差不多），这样很浪费资源，而且效率低下。
WebSocket的原理就是提供一个在单个tcp连接上进行双向通行，这样可以避免打开多个HTTP连接工作浪费资源，因为它只要打开一个就可以一直保持通讯，这样提高了效率和资源利用率。

主要代码如下：

1.html部分：

  <div> 
   <input type="text" id="sid" placeholder="请输入房间号" />
   <br /> 
   <input type="text" id="nickname" placeholder="请输入昵称" />
   <br /> 
   <input type="submit" value="连接" onclick="connect()" />
   <br /> 
   <textarea rows="3" cols="20" id="content"></textarea>
   <br /> 
   <input type="submit" value="发送" onclick="start()" /> 
   <input type="button" value="关闭" onclick="onCloses()" /> 
   <br /> 
  </div> 
  <div id="messages"></div> 

2.js部分

var webSocket = null;
function onMessage(event) {
    document.getElementById('messages').innerHTML += '<br />' + event.data;
}
function onOpen(event) {
    document.getElementById('messages').innerHTML += '<br />' + 'Connection established';
}
function onError(event) {
    alert("发生错误");
}
function onClose(event) {
    alert("连接关闭");
}
function connect() {
    var sid = document.getElementById('sid').value;
    var nickname = document.getElementById('nickname').value;
    if (url == '' || nickname == '') {
        alert("房间号和用户名不能为空");
        return;
    }
    var serverHot = window.location.host;
    var url = 'ws://' + serverHot + '/groupChat/' + sid + '/' + nickname;
    webSocket = new WebSocket(url);
    webSocket.onerror = function(event) {
        onError(event)
    };
    webSocket.onopen = function(event) {
        onOpen(event)
    };
    webSocket.onmessage = function(event) {
        onMessage(event)
    };
    webSocket.onclose = function(event) {
        onClose(event)
    };
}
function start() {
    var text = document.getElementById('content').value;
    webSocket.send(text);
    document.getElementById('content').value = '';
}
function onCloses() {
    webSocket.close();
    document.getElementById('messages').innerHTML = '';
}

这里找到一个较好的模板
你可以通过 start() 方法来向服务器发送数据，并通过webSocket.onmessage事件来接收服务器返回的数据，ws是一个websocket库，可以用了创建服务器。你可以在这两个方法内做自己想完成的事情。

后续补充

在webSocket.onmessage方法内我们可以写一个心跳监听，这样可以防止意外断开，为了防止由于连接断开但未实时感知导致数据丢失的心跳检测机制。
这个可以去网上找找，一定有比我更好的示例::(打脸)