zoukankan      html  css  js  c++  java
  • socket服务器 前后端连接

     
    客户端
     
    html结构
    <input type="text">
    <button onclick="sendServer()">send</button>

    js代码

    const ws = new WebSocket('ws://localhost:8080/')// 参数是要连接的服务器地址
    
    // 已经连接
    ws.onopen = () => {
    // ws.send('大家好')
    }
    
    // 前端接受服务器消息
    ws.onmessage = (msg) => {
    console.log(msg) //欢迎光临
    
    // const content = document.getElementById('content')
    // content.innerHTML += msg.data + '<br/>'
    }
    
    // 错误的时候触发
    ws.onerror = (err) => {
    console.log(err);
    }
    
    // 服务器断开连接的时候触发
    ws.onclose = () => {
    console.log('closed~');
    }
    
    //前端向后端发消息
    function sendServer(){
    let text=document.getElementsByTagName('input')[0].value
    ws.send(text)
    }

    后端服务器

    const WebSocket = require('ws')
    const ws = new WebSocket.Server({ port: 8080 },()=>{
    console.log('socket 服务器开启')
    })
    // 开启一个socket 服务器
    ws.on('connection', (client) => {
    // client 是连接上的客户端对象
    console.log('客户端连接')
    client.send('欢迎光临') //后端向前端发送消息
    // client.name = ++ clientName
    // clients[client.name] = client
    //接受客户端发送的消息
    client.on('message', (msg) => {
    console.log(msg)
    // broadcast(client, msg)
    })
    // client.on('close', () => {
    // delete clients[client.name]
    // console.log(client.name + ' 离开了~')
    // })
    })
    // function broadcast(client, msg) {
    // for (var key in clients) {
    // clients[key].send(client.name + ' 说:' + msg)
    // }
    // }
    注释代码为根据需要而用
  • 相关阅读:
    Django实战(4):scaffold生成物分析
    Django实战(3):Django也可以有scaffold
    创建第一个模型类
    1. 实战系列的开发目标
    Django第一步
    URLconf+MTV:Django眼中的MVC
    mp4文件格式解析
    傅里叶分析之掐死教程(完整版)更新于2014.06.06
    关于Spinlock机制的一点思考
    spinlock变量没有初始化
  • 原文地址:https://www.cnblogs.com/lucktomiao/p/10411657.html
Copyright © 2011-2022 走看看