.Net——基于SuperSocket实现的WebSocket（前端）

本文内容是搭配后端使用的，没看过WebSocket后端实现的童鞋们戳这里

咳咳，其实前端实现相对就容易很多了，因为我们有JavaScript WebSocket Api，它看上来大致是这样的：

var ws = \'\';//WebSocket对象
var userName = \'测试同学\' + parseInt(Math.random(1) * 888);//用户名
//初始化连接
function connect() {
    var address = "ws://127.0.0.1:10086";//服务端地址
    ws = new WebSocket(address);//实例化WebSocket对象
    //开始连接时
    ws.onopen = function (e) {
        ws.send(\'[login]{"userid":"\' + userName + \'"}\');
    };
    //收到信息时
    ws.onmessage = function (e) {
        var Json = eval(\'(\' + e.data + \')\');
        switch (Json.type) {
            case \'1\':
                //新用户连接时
                break;
            case \'2\':
                var Html = \'\';
                Html += \'<p>\';
                Html += Json.user + \':\' + Json.msg;
                Html += \'</p>\';
                $(\'#msgBox\').append(Html);
                break;
        }
    };
    //发生错误时
    ws.onerror = function (e) {

    };
    //连接关闭时
    ws.onclose = function (e) {
        $(\'#msgBox\').append(\'<p>与聊天室的连接已断开。</p>\');
    };
}

//公聊发送
function send() {
    var SendText = $(\'#send\').val();
    ws.send(\'[send]{"msg":"\' + SendText + \'","user":"\' + userName + \'"}\');
}

 这些东西是固定的，记就行了~简单解释下：

关键之一：ws.onmessage,它可以在收到服务端信息时做出响应——然后你就可以为所欲为了。

该方法返回的信息存储在e.data内，内容取决于你的服务端如何编写（这里视作返回Json）。

关键之二：ws.send(),它可以发送信息到你编写的服务端（至于内容，依然取决于你后端如何实现）。

关键之三：ws.onopen(),通过它可以打开与服务端的沟通（要设置好WebSocket对象）。

 

下面是实现的效果（很丑勿吐槽）：

记得要找支持H5的浏览器哦~