html5 WebSocket

推荐看《Websocket原理》

前端部署：

<div id="sse">
   <a href="javascript:WebSocketTest()">运行 WebSocket</a>
</div>

<script type="text/javascript">
         function WebSocketTest()
         {
            if ("WebSocket" in window)
            {
               alert("您的浏览器支持 WebSocket!");
               
               // 打开一个 web socket
               var ws = new WebSocket("ws://localhost:9998/echo");
               ws.readyState //状态码
               //0 - 表示连接尚未建立。
               //1 - 表示连接已建立，可以进行通信。
               //2 - 表示连接正在进行关闭。
               //3 - 表示连接已经关闭或者连接不能打开。
 
               ws.onopen = function()
               {
                  // Web Socket 已连接上，使用 send() 方法发送数据
                  ws.send("发送数据");
                  alert("数据发送中...");
               };
           
               //监听ws的open方法回调
               ws.addEventListener('open',function(event) {
                  ws.send('Hello Server!');
               });
                
               ws.onmessage = function (evt) 
               { 
                  var received_msg = evt.data;
                  alert("数据已接收...");
               };
                
               ws.onclose = function()
               { 
                  // 关闭 websocket
                  alert("连接已关闭..."); 
               };
            }
            
            else
            {
               // 浏览器不支持 WebSocket
               alert("您的浏览器不支持 WebSocket!");
            }
         }
</script>

https://www.runoob.com/html/html5-websocket.html

websocket知识普及： https://mp.weixin.qq.com/s/IRH0Y8wJjGKsydRWJ6KH7g

后端：根据自己所学的后台语言自行查阅

可以查阅node.js封装好前后端一套的代码https://sdeno.com/?p=4549