足球盘口软件
当前位置: 足球盘口软件 > 前端 >
实时聊天系统问题咨询,websocket实时聊天系统

websocket+node.js 实时闲谈系统难题提问,websocketnode.js

1.多年来新学习websocket。做了叁个实时闲谈。用Node.js搭建的服务:serevr.js. 七个相互通讯页面:client.html 和server.html

然则正是有无尽主题素材,想让知道的人帮我看看哈:

自己先把代码贴出来:

server.js:

 var ws=require("nodejs-websocket");  console.log("起头树立连接...");  var str1=null,str2=null, clientReady=false,serverReady=false;  var server=ws.createServer(function(conn){      conn.on('text',function(str){          console.log(str);           /**            * 客户中雨第叁回接二连三            */         if(str==="小雨"){               str1=conn;               clientReady=true;               str1.sendText("欢迎"+str);          }         /**          * 客商小桥第壹回延续          */         if(str==="小乔"){              str2=conn;              serverReady=true;             str2.sendText("欢迎"+str);         }                /**          * 当有第四个顾客连接时。          */          if(clientReady&&serverReady){             str2.sendText(str);             str1.sendText(str);         }                   })      conn.on("close",function(code,reason){          console.log("关闭连接");      })      conn.on("error",function(code,reason){          console.log("非常关闭")      });  }).listen(8082);  console.log("websocket连接达成")   client.html: <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         .kuang{             width: 600px;             min-height: 50px;             max-height:296px;             border:1px solid;             float: left;             display:  block;             position:relative;             overflow-y: scroll;         }         .value{               width: 200px;                       }         .input{             display:block;             position: absolute;             left:0;             margin-top: 300px;         }     </style> </head> <body>     <label>连接客户:</label>     <input type="text" id="name" value="大雨"  readonly/>     <button id="conn">连接</button>     <button id="close">断开</button><br/><br/>     <div class="kuang" id="mess"></div>     <div class="input">      <input type="text" class="value" id="value1"  />     <button id="send">发送</button>     </div>     <script>         var name=document.getElementById("name").value;         var mess=document.getElementById("mess");         var value1=document.getElementById("value1");         var conn= document.getElementById("conn");         var close=document.getElementById("close");         close.disabled=true;         if(window.WebSocket){           conn.onclick=function(){             var ws=new WebSocket('ws://127.0.0.1:8082');             conn.disabled=true;             close.disabled=false;               ws.onopen=function(e){                     console.log("连接服务器成功");                        ws.send(name);             }          ws.onmessage=function(e){             var time=new Date();             mess.innerHTML+=time.toUTCString()+":"+e.data+"<br>";             document.getElementById("send").onclick=function(e){                ws.send(name+"说:"+value1.value);                value1.value=" ";             }             document.onkeydown = function(e) {                 e = e || window.event;                 if(e.keyCode == 13) {                      document.getElementById("send").onclick();                     return false;                 }             }             }         /**          * 客户端主动断开连接          *           * **/           close.onclick=function(){             ws.onclose();             conn.disabled=false;             close.disabled=true;          }              ws.onclose = function(e){              console.log("服务器关闭");           }           ws.onerror = function(){             console.log("连接出错");         }                }         }     </script> </body> </html>   server.html 页面和client.html的代码相似,正是用户名字换到小桥啦。 接下来就是难题啊: 1.周转分界面:   client.html  连接未来:
图片 1

本来服务器只须要回传叁个招待大雨的,然后下边还输出了三个。

server.html  小桥连接现在也出去了四个小乔,按理是接待小桥。然后告诉小桥大雨在线了。

图片 2

2.五个页面代码雷同,可是正是无法只化为四个页面,硬要三个能力促膝交谈。

3.server.js那边逻辑有一些难题,向来理不知道。

 

 

实时闲谈系统难题提问,websocketnode.js 1.多年来新学习websocket。做了三个实时闲聊。用Node.js搭建的劳动:serevr.js. 五个相互通信页...

nodejs+websocket实时闲聊系统,nodejswebsocket

1.本文归于修改版本哈

自个儿也是真的菜,三个websocket轻易闲聊系统硬被小编搞了这多个天。

总体上看今后只怕得写更加多的代码。

client.html:

<!DOCTYPE html> <html lang="en">
<head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <meta http-equiv="X-UA-Compatible" content="ie=edge">     <title>Document</title>     <style>         .kuang {             width: 600px;             min-height: 50px;             max-height: 296px;             border: 1px solid;             float: left;             display: block;             position: relative;             overflow-y: scroll;         }
        .value {             width: 200px;         }
        .input {             display: block;             position: absolute;             left: 0;             margin-top: 300px;         }     </style> </head>
<body>     <label>连接顾客:</label>     <input type="text" id="name" />     <button id="conn">连接</button>     <button id="close">断开</button><br/><br/>     <div class="kuang" id="mess"></div>     <div class="input">         <input type="text" class="value" id="value1" />         <button id="send">发送</button>     </div>     <script>         var input = document.getElementById("name");         var conn = document.getElementById("conn");         var close = document.getElementById("close");         var mess = document.getElementById("mess");         var value1 = document.getElementById("value1");         var pattern = /^[u4e00-u9fa5]{2,10}$/;
        close.disabled = true;         if (window.WebSocket) {             conn.onclick = function () {                 if (!pattern.test(input.value)) {                     alert("名称不可能为空且必需为华语");                     return;                 }                 var ws = new WebSocket('ws://127.0.0.1:8082');                 conn.disabled = true;                 close.disabled = false;                 ws.onopen = function (e) {                     console.log("连接服务器成功");                     ws.send(input.value);                     input.setAttribute("readOnly", 'true');                     value1.setAttribute("readOnly", 'true');                 }                 ws.onmessage = function (e) {                     value1.removeAttribute("readOnly");                     var time = new Date();                     mess.innerHTML += time.toUTCString() + ":" + e.data + "<br>";                     document.getElementById("send").onclick = function (e) {                         ws.send(input.value + "说:" + value1.value);                         value1.value = " ";                     }                     document.onkeydown = function (e) {                         e = e || window.event;                         if (e.keyCode == 13) {                             document.getElementById("send").onclick();                             return false;                         }                     }                 }                 ws.onclose = function (e) {                     console.log("服务器关闭");                 }                 ws.onerror = function () {                     console.log("连接出错");                 }                 /**                        * 顾客端主动断开连接                        *                         * **/                 close.onclick = function () {                     ws.onclose();                     ws.send(input.value + 'close' + "了连接");                     input.removeAttribute("readOnly");                     conn.disabled = false;                     close.disabled = true;                 }
            }

        }     </script> </body>
</html>   只能说界面丑陋忽视它。 server.js: var ws = require("nodejs-websocket"); console.log("初叶别辟门户连接..."); var str1 = null, str2 = null, clientReady = false, serverReady = false; var a = []; var server = ws.createServer(function (conn) {     conn.on('text', function (str) {         a.push(str);         if (!clientReady) {             if (a[0] === str) {                 str1 = conn;                 clientReady = true;                 str1.sendText("欢迎你" + str);
            }         } else if (!serverReady) {             if (str.indexOf('close') >= 0) {                 a.splice(2, 1);                 clientReady = false;                 str1 = null;                 return;             }             if (a[1] === str) {                 str2 = conn;                 serverReady = true;                 str2.sendText("款待您" + str);                 str1.sendText(str + "在线啦,你们能够闲谈啦");                 return;             }         } else if (clientReady && serverReady) {             str2.sendText(str);             str1.sendText(str);             if (str.indexOf('close') >= 0) {                 a.splice(2, a.length);                 var len = a.length;                 for (var i = 0; i < len; i++) {                     // 定位该因素地点                    if (str.indexOf(a[i]) >= 0) {                         a.splice(i, 1);                         if (i == 0) {                             str1 = str2;                         }                         serverReady = false;                         str2 = null;                         return;                     }
                }             }         }

    })
    conn.on("close", function (code, reason) {         console.log("关闭连接");         clientReady = false;         serverReady = false;     })     conn.on("error", function (code, reason) {         console.log("十分关闭");     }); }).listen(8082); console.log("websocket连接达成")

简轻巧单的截图注解黄金时代(Wissu卡塔尔下: 图片 3   图片 4

 

图片 5

 

拉开服务,相近页面试行一遍,就足以聊聊啦。 反正进程正是如此。 正是还会有三个大的难题。比方笔者a断开连接了,唯有b一位在接连一代天骄b还能够发音讯,能够发音讯算可以呢。居然b本身收到本身的音讯。那就不可能忍了。 图片 6

就是这种啊,逻辑都错乱了,理清逻辑是个费脑子的政工。有明白的同学吗?怎么管理啊

1.本文归于改良版本哈 自身也是真的菜,三个websocket轻巧闲谈系统硬被自身搞了那个天。 看来未来...

该使用供给很简短,正是在web选项卡中展开两个网页,模拟五个web顾客端完毕闲扯功效。

设计初志是通过websocket实现网页实时报纸发表谈心。

先是是客商端如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
{
margin: 0;
padding: 0;
}
.message{
width: 60%;
margin: 0 10px;
display: inline-block;
text-align: center;
height: 40px;
line-height: 40px;
font-size: 20px;
border-radius: 5px;
border: 1px solid #B3D33F;
}
.form{
width:100%;
position: fixed;
bottom: 300px;
left: 0;
}
.connect{
height: 40px;
vertical-align: top;
/
padding: 0; */
width: 80px;
font-size: 20px;
border-radius: 5px;
border: none;
background: #B3D33F;
color: #fff;
}
</style>
</head>
<body>
<ul id="content"></ul>
<form class="form">
<input type="text" placeholder="请输入发送的音信" class="message" id="message"/>
<input type="button" value="发送" id="send" class="connect"/>
<input type="button" value="连接" id="connect" class="connect"/>
</form>
<script></script>
</body>
</html>

工程景况:apache-tomcat-7.0.68+jdk1.7+maven+eclipse

var oUl=document.getElementById('content');
var oConnect=document.getElementById('connect');
var oSend=document.getElementById('send');
var oInput=document.getElementById('message');
var ws=null;
oConnect.onclick=function(){
ws=new WebSocket('ws://localhost:5000');
ws.onopen=function(){
oUl.innerHTML+="<li>客商端已接连</li>";
}
ws.onmessage=function(evt){
oUl.innerHTML+="<li>"+evt.data+"</li>";
}
ws.onclose=function(){
oUl.innerHTML+="<li>客户端已断开连接</li>";
};
ws.onerror=function(evt){
oUl.innerHTML+="<li>"+evt.data+"</li>";
};
};
oSend.onclick=function(){
if(ws){
ws.send(oInput.value);
}
}

规划思路:顾客端登入网页创立socket连接,后台记录顾客连接新闻并做标记;当客商在网页端发送聊天音讯至后台,后台选撤消息后将音信发送至接受者,同临时间后端对音讯进行贯彻始终保存。

此间运用的是w3c规范中有关HTML5 websocket API的原生API,这个api非常粗略,就是使用new WebSocket创设五个钦赐连接服务端地址的ws实例,然后为该实例注册onopen(连接服务端),onmessage(选取服务端数据),onclose(关闭连接)以致ws.send(创设连接后)发送供给。上边说了那么多,事实上能够看看html5 websocket API本人是很简短的四个对象和它的多少个情势而已。

大约代码达成demo如下:

服务端选用nodejs,这里须要依照贰个nodejs-websocket的nodejs服务端的库,它是一个轻量级的nodejs websocket server端的完成,实际上也是运用nodejs提供的net模块写成的。

1、pom.xml首要安顿

server.js
var app=require('http').createServer(handler);
var ws=require('nodejs-websocket');
var fs=require('fs');
app.listen(80);
function handler(req,res){
fs.readFile(__dirname+'/client.html',function(err,data){
if(err){
res.writeHead(500);
return res.end('error ');
}
res.writeHead(200);
res.end(data);
});
}
var server=ws.createServer(function(conn){
console.log('new conneciton');
conn.on("text",function(str){
broadcast(server,str);
});
conn.on("close",function(code,reason){
console.log('connection closed');
})
}).listen(5000);

        <dependency>
            <groupId>javax.websocket</groupId>
            <artifactId>javax.websocket-api</artifactId>
            <version>1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-websocket</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-messaging</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aop</artifactId>
            <version>${spring.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-api</artifactId>
            <version>${log4j.version}</version>
        </dependency>
        <dependency>
            <groupId>org.apache.logging.log4j</groupId>
            <artifactId>log4j-core</artifactId>
            <version>${log4j.version}</version>
        </dependency>


        <!-- AspectJ -->
        <!-- <dependency>
            <groupId>org.aspectj</groupId>
            <artifactId>aspectjrt</artifactId>
            <version>${org.aspectj-version}</version>
        </dependency> -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-aspects</artifactId>
            <version>${spring.version}</version>
        </dependency>

function broadcast(server, msg) {
server.connections.forEach(function (conn) {
conn.sendText(msg);
})
}

 2、websocket服务端完毕

率先应用http模块监听客商的http央求并展现client.html分界面,然后成立多少个websocket服务端等待客户连接,在接到到客户发送来的数目以往将它广播到持有连接到的客商端。

package com.milanosoft.RCS.web.webSocket.config;

import com.milanosoft.RCS.web.webSocket.hndler.SystemWebSocketHandler;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.config.annotation.EnableWebSocket;
import org.springframework.web.socket.config.annotation.WebSocketConfigurer;
import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry;

import com.milanosoft.RCS.web.webSocket.interceptor.HandshakeInterceptor;
import org.springframework.context.annotation.Bean;

@Configuration
@EnableWebMvc
@EnableWebSocket
public class WebSocketConfig extends WebMvcConfigurerAdapter implements
        WebSocketConfigurer {

    public WebSocketConfig() {
    }

    @Override
    public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
        registry.addHandler(systemWebSocketHandler(), "/websck").addInterceptors(new HandshakeInterceptor());

        System.out.println("registed!");
        registry.addHandler(systemWebSocketHandler(), "/sockjs/websck").addInterceptors(new HandshakeInterceptor())
                .withSockJS();

    }

    @Bean
    public WebSocketHandler systemWebSocketHandler() {
        //return new InfoSocketEndPoint();
        return new SystemWebSocketHandler();
    }

}

下边大家张开三个浏览器选项卡模拟七个客商端进行三番五次,

 3、websocket连接内外的事件类

客户端大器晚成总是:

package com.milanosoft.RCS.web.webSocket.interceptor;

import java.util.Map;

import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.stereotype.Component;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.server.support.HttpSessionHandshakeInterceptor;


@Component
public class HandshakeInterceptor extends HttpSessionHandshakeInterceptor {

    @Override
    public boolean beforeHandshake(ServerHttpRequest request,
            ServerHttpResponse response, WebSocketHandler wsHandler,
            Map<String, Object> attributes) throws Exception {

        //解决The extension [x-webkit-deflate-frame] is not supported问题
        if(request.getHeaders().containsKey("Sec-WebSocket-Extensions")) {
            request.getHeaders().set("Sec-WebSocket-Extensions", "permessage-deflate");
        }

        System.out.println("Before Handshake");
        return super.beforeHandshake(request, response, wsHandler, attributes);
    }

    @Override
    public void afterHandshake(ServerHttpRequest request,
            ServerHttpResponse response, WebSocketHandler wsHandler,
            Exception ex) {
        System.out.println("After Handshake");
        super.afterHandshake(request, response, wsHandler, ex);
    }

}

图片 7

//解决The extension [x-webkit-deflate-frame] is not supported问题
        if(request.getHeaders().containsKey("Sec-WebSocket-Extensions")) {
            request.getHeaders().set("Sec-WebSocket-Extensions", "permessage-deflate");
        }

image

在那之中标赫色的代码是为了缓和上面包车型客车失实,大概是ios手提式有线电话机safari浏览器版本难题引起的。

恳请响应报文如下:

org.springframework.web.socket.server.HandshakeFailureException: Uncaught failure for request ; nested exception is java.lang.IllegalArgumentException: The extension [x-webkit-deflate-frame] is not supported

图片 8

 4、websocket新闻管理类

image

/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */
package com.milanosoft.RCS.web.webSocket.hndler;

import org.springframework.stereotype.Component;
import org.springframework.web.socket.CloseStatus;
import org.springframework.web.socket.TextMessage;
import org.springframework.web.socket.WebSocketHandler;
import org.springframework.web.socket.WebSocketMessage;
import org.springframework.web.socket.WebSocketSession;

/**
 *
 * @author lzk
 */
@Component
public class SystemWebSocketHandler implements WebSocketHandler {

    @Override
    public void afterConnectionEstablished(WebSocketSession session) throws Exception {
        System.out.println("connect to the websocket success......");
        session.sendMessage(new TextMessage("Server:connected OK!"));
    }

    @Override
    public void handleMessage(WebSocketSession wss, WebSocketMessage<?> wsm) throws Exception {
        TextMessage returnMessage = new TextMessage(wsm.getPayload()
                + " received at server");
        System.out.println(wss.getHandshakeHeaders().getFirst("Cookie"));
        wss.sendMessage(returnMessage);
    }

    @Override
    public void handleTransportError(WebSocketSession wss, Throwable thrwbl) throws Exception {
        if(wss.isOpen()){
            wss.close();
        }
       System.out.println("websocket connection closed......");
    }

    @Override
    public void afterConnectionClosed(WebSocketSession wss, CloseStatus cs) throws Exception {
        System.out.println("websocket connection closed......");
    }

    @Override
    public boolean supportsPartialMessages() {
        return false;
    }

}

能够看见此番握手和我们后边讲的如出豆蔻年华辙,

 5、顾客端页面

客商端二的一连进程和1是千篇生机勃勃律的,这里为了查看我们选拔ff浏览器,多少个顾客端的接连几天景况如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"  

图片 9

    pageEncoding="UTF-8"%>  

image

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ";  

发送音讯景况如下:

<html>  

图片 10

<head>  

image

<%session.setAttribute("user", "lzk"); %>  

能够看见,双方发送的新闻棉被和衣服务端广播给了每一种和和谐接连的顾客端。

<title>WebSocket/SockJS Echo Sample (Adapted from Tomcat's echo sample)</title>  

从上述大家可以看来,要想做二个点对点的im应用,websocket接纳的方法是让抱有顾客端连接服务端,服务器将区别顾客端发送给自个儿的音讯举办转账恐怕广播,而对于本来的socket,只要双方营造连接之后,就足以发送端对端的数据,无需通过第三方的倒车,那也是websocket分裂于socket的叁个最重要特点。

    <style type="text/css">  

最终,本文为了证实html5标准中的websocket在客户端选择了原生的API,实际付出中,有相比较有名的多个库socket.io和sockjs,它们都对原来的API做了更为封装,提供了越来越多职能,都分为客户端和服务端的兑现,实际接收中,可以筛选选择。
转自https://www.cnblogs.com/myzhibie/p/4470065.html

        #connect-container {  

            float: left;  

            width: 400px  

        }  

        #connect-container div {  

            padding: 5px;  

        }  

        #console-container {  

            float: left;  

            margin-left: 15px;  

            width: 400px;  

        }  

        #console {  

            border: 1px solid #CCCCCC;  

            border-right-color: #999999;  

            border-bottom-color: #999999;  

            height: 170px;  

            overflow-y: scroll;  

            padding: 5px;  

            width: 100%;  

        }  

        #console p {  

            padding: 0;  

            margin: 0;  

        }  

    </style>  

    <script src=";  

    <script type="text/javascript">  

        var ws = null;  

        var url = null;  

        var transports = [];  

        function setConnected(connected) {  

            document.getElementById('connect').disabled = connected;  

            document.getElementById('disconnect').disabled = !connected;  

            document.getElementById('echo').disabled = !connected;  

        }  

        function connect() {  

            //alert(url);  

            //console.log(url);  

            if (!url) {  

                alert('Select whether to use W3C WebSocket or SockJS');  

                return;  

            }  

            //ws = (url.indexOf('sockjs') != -1) ?new SockJS(url, undefined, {protocols_whitelist: transports}) : new WebSocket(url);  

            if ('WebSocket' in window) {  

                ws= new WebSocket("ws://192.168.1.104:8080/SpringWebSocketPush/websck");  

                console.log("ws://192.168.1.104:8080/SpringWebSocketPush/websck");  

            }else {  

                ws = new SockJS("");  

                console.log("");  

            }  

            //websocket = new SockJS("");  

            ws.onopen = function () {  

                alert('open');  

                setConnected(true);  

                //log('Info: connection opened.');  

            };  

            ws.onmessage = function (event) {  

                alert('Received:' + event.data);  

                log('Received: ' + event.data);  

            };  

            ws.onclose = function (event) {  

                setConnected(false);  

                log('Info: connection closed.');  

                log(event);  

            };  

        }  

        function disconnect() {  

            if (ws != null) {  

                ws.close();  

                ws = null;  

            }  

            setConnected(false);  

        }  

        function echo() {  

            if (ws != null) {  

                var message = document.getElementById('message').value;  

                log('Sent: ' + message);  

                ws.send(message);  

            } else {  

                alert('connection not established, please connect.');  

            }  

        }  

        function updateUrl(urlPath) {  

            if (urlPath.indexOf('sockjs') != -1) {  

                url = urlPath;  

                document.getElementById('sockJsTransportSelect').style.visibility = 'visible';  

            }  

            else {  

              if (window.location.protocol == 'http:') {  

                  url = 'ws://' + window.location.host + urlPath;  

              } else {  

                  url = 'wss://' + window.location.host + urlPath;  

              }  

              document.getElementById('sockJsTransportSelect').style.visibility = 'hidden';  

            }  

        }  

        function updateTransport(transport) {  

            alert(transport);  

          transports = (transport == 'all') ?  [] : [transport];  

        }  

        function log(message) {  

            var console = document.getElementById('console');  

            var p = document.createElement('p');  

            p.style.wordWrap = 'break-word';  

            p.appendChild(document.createTextNode(message));  

            console.appendChild(p);  

            while (console.childNodes.length > 25) {  

                console.removeChild(console.firstChild);  

            }  

            console.scrollTop = console.scrollHeight;  

        }  

    </script>  

</head>  

<body>  

<noscript><h2 style="color: #ff0000">Seems your browser doesn't support Javascript! Websockets   

    rely on Javascript being enabled. Please enable  

    Javascript and reload this page!</h2></noscript>  

<div>  

<br>  

    <div id="connect-container">  

        <input id="radio1" type="radio" name="group1" onclick="updateUrl('/SpringWebSocketPush/websck');">  

            <label for="radio1">W3C WebSocket</label>  

        <br>  

        <input id="radio2" type="radio" name="group1" onclick="updateUrl('/SpringWebSocketPush/sockjs/websck');">  

            <label for="radio2">SockJS</label>  

        <div id="sockJsTransportSelect" style="visibility:hidden;">  

            <span>SockJS transport:</span>  

            <select onchange="updateTransport(this.value)">  

              <option value="all">all</option>  

              <option value="websocket">websocket</option>  

              <option value="xhr-polling">xhr-polling</option>  

              <option value="jsonp-polling">jsonp-polling</option>  

              <option value="xhr-streaming">xhr-streaming</option>  

              <option value="iframe-eventsource">iframe-eventsource</option>  

              <option value="iframe-htmlfile">iframe-htmlfile</option>  

            </select>  

        </div>  

        <div>  

            <button id="connect" onclick="connect();">Connect</button>  

            <button id="disconnect" disabled="disabled" onclick="disconnect();">Disconnect</button>  

        </div>  

        <div>  

            <textarea id="message" style="width: 350px">Here is a message!</textarea>  

        </div>  

        <div>  

            <button id="echo" onclick="echo();" disabled="disabled">Echo message</button>  

        </div>  

    </div>  

    <div id="console-container">  

        <div id="console"></div>  

    </div>  

</div>  

</body>  

</html>

返回顶部