Websocket（二）-客户端与服务器通信

Websocket（二）-客户端与服务器通信

• 服务端
  • 客户端测试

const WebSocket = require('ws');
const Server = WebSocket.Server;
const ws = new Server({
  port: 9999
});
ws.on('connection', (client) => {
  // 回调函数的参数client表示已经连接的客户端
  client.on('close', () => {
    console.log('close')
  });
  // 与客户端具体通信
  client.on('message', (data) => {
    // data表示客户端发送过来的数据
    console.log(data)
    if(data == '你好') {
      client.send('你也好');
    }else if(data == '土豆') {
      client.send('白菜');
    }
  });
  // 首次链接成功后返回：欢迎访问
  // client.send方法的作用：发送数据到客户端
  client.send('欢迎访问')
})

• 客户端

// 发布订阅模式
var Event = {};
Event.on = function(type, cb) {
    this.listener = this.listener || {};
    this.listener[type] = this.listener[type] || [];
    this.listener[type].push(cb);
}
Event.emit = function(type) {
    var events = this.listener[type];
    events.forEach(item => {
        item(arguments[1]);
    })
}
// 1. 创建 WebSocket 对象
// 参数为url 以 ws/wss 开头 ws/wss://IP:PORT
var url = "ws://127.0.0.1:9999"
var ws = new WebSocket(url)
// 2. 监听 WebSocket 事件
// 2.1 监听连接打开事件
ws.onopen = function() {
    console.log("连接成功")
        //3. 向服务器发送数据 
        // ws.send("hello")
    Event.on('send-msg', (msg) => {
        // 发送表单数据到服务器端
        ws.send(msg);
    })
}
// 2.2 监听关闭事件 
ws.onclose = function() {
    console.log("连接关闭")
}
// 2.3 连接出错
ws.onerror = function(err) {
    console.log(err)
}
// 2.4 当接收到服务器数据时的回调事件
ws.onmessage = function(evt) {
    console.log("message:", evt.data)
}
var btn = document.getElementById('btn');
btn.onclick = function() {
    var input = document.getElementById('info');
    // 向服务器发送消息
    Event.emit('send-msg', input.value);
}