Websocket原理

#基础JavaScript

Web Sockets

Web Sockets是一个实现双向实时通信的协议 Web Sockets的目的是： 在一个单独持久的连接上提供全双工、双向通信 (http或https是单向的，只能客户端向服务器请求。WebSocket可以实现服务器向客户端自动发信息，场景：天气信息等。以前的实现需要轮询)

web sockets 使用

创建一个WebSocket实例

var socket = new WebSocket("ws://www.example.com/server.php");

注意：传入的参数是一个绝对的URL，websocket协议不受同源策略的影响。

向服务器发送数据 send()方法

socket.send("Hello world");

注意：websocket只能通过send发送纯文本数据，对于复杂的数据结构，需要在发送之前进行序列化。

例如：发送JSON数据

var message = {  
    time: new Date(),  
    text: "hello world",  
    clientId: "asdfp8734rew"  
}   
socket.send(JSON.stringify(message));

从服务器接收数据

当服务器向客户端发送消息时，websocket对象会触发message事件，返回的数据保存在event.data属性中。

socket.onmessage = function(event){  
    var data = event.data; // 然后处理获得的数据data   
}

event.data 中保存的也是字符串

websocket对象

websocket对象的属性

WebSocket属性readState取值： WebSocket.OPENING(0):正在建立连接 WebSocket.OPEN(1):已经建立连接 WebSocket.CLOSING(2):正在关闭连接 WebSocket.CLOSE(3):已经关闭连接

• websocket对象的方法 send() close()
• websocket 对象的事件
• message：服务器向客户端发送消息时会触发
• open：客户端与服务器成功建立连接时触发
• error：在发生错误时触发，连接不能持续
• close：在连接关闭时触发 close事件的event有额外的信息：
• wasClean:布尔值，是否明确地关闭
• code：服务器返回的数值状态码
• reason：字符串，包含服务器发回的消息

实例：

在项目中实现这么一个Ws类：

//websocket 
class Ws {
    /**
     * 获取sorcket
     */
    static getWs(api) {
        let ws = new WebSocket(api);    
 
        ws.onopen = function(){  
            console.log('open');
            ws.send('hello，socket！');//测试
        };
        
        ws.onmessage = function(e){  
            var data = e.data; // 然后处理获得的数据data   
            console.log('socket',data)
        }
        
        ws.onclose = function(e){
          console.log('WebSocketClosed!');
        };
        
        ws.onerror = function(e){
          console.log('WebSocketError!');
        };  
    }

  }
  
  export default Ws;

使用时：

Ws.getWs('ws://123.207.167.163:9010/ajaxchattest');

#基础JavaScript