socket几种解决方式

最新推荐文章于 2022-04-19 14:16:02 发布

苏废物~~

最新推荐文章于 2022-04-19 14:16:02 发布

阅读量605

点赞数

分类专栏： socket几种解决方式文章标签： socket几种解决方式

本文链接：https://blog.csdn.net/weixin_42307490/article/details/93223705

版权

socket几种解决方式专栏收录该内容

1 篇文章 0 订阅

订阅专栏

SocketServer.js

1.net.socket(思想)

const net = require（'net' ）

const server = new net.createServer（）

让 客户 = {}
让 clientName = 0

server.on（'connection' ，（client） => {
        client.name = ++ clientName
        客户[client.name] = 客户端

//对客户端发送数据的监听
        client.on（'data' ，（msg） => {
            // console.log（'客户端传来：'+ msg）;
            broadcast（client，msg.toString（））
        }）
        
        client.on（'error' ，（e） => {
            console.log（'客户端错误' + e）;
            client.end（）
        }）

//客户端下线提示

        client.on（'close' ，（data） => {
            删除 客户端[client.name]
            console.log（client.name + ' 下线了' ）;
        }）

}）

//进行消息广播
function broadcast（client，msg）{
    对于 （VAR 键 在 客户端）{
        客户[key] .write（client.name + '说：' + msg）
    }
}

server.listen（9000 ）

SocketClient.js

var net = require（'net' ）
const readline = require（'readline' ）

var port = 9000
var host = '127.0.0.1'

var socket = new net.Socket（）

socket.setEncoding = 'UTF-8'

socket.connect（port，host，（） => {
    socket.write（'hello。' ）
}）

socket.on（'data' ，（msg） => {
    的console.log（msg.toString（））
    说（）
}）

socket.on（'error' ， function （err）{
    console.log（'error' + err）;
}）

socket.on（'close' ， function （）{
    console.log（'connection closeed' ）;
}）

//用户端命令行输入信息

const r1 = readline.createInterface（{
    输入：process.stdin，
    输出：process.stdout
}）

function say（）{
    r1.question（'请输入：' ，（inputMsg） => {
        if （inputMsg ！= 'bye' ）{
                socket.write（inputMsg + '\ n' ）
        } else {
                socket.destroy（）
                r1.close（）
        }
    }）
}

2.socket.io（低版本的PC端）

目录结构

在这里插入图片描述

2.1 server.js

var express = require（'express' ）;
var app = express（）;
var server = require（'http' ）。Server（app）;
var io = require（'socket.io' ）（server）;

app.use（express.static（__ dirname + 'client' ））

io.on（'connection' ， function （socket）{
    //广播信息数据信息接收
    socket.on（'receive' ，（msg） => {
        socket.broadcast.emit（'message' ，msg）;
    }）
}）;

server.listen（8081 ， 'ip地址' ）;

2.2 package.json

{
    “依赖” ：{
        “表达” ： “^ 4.16.3” ，
        “socket.io” ： “^ 2.1.1”
    }
}

2.3 index.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> socket.io </ title>
<script src = “socket.io.js” charset = “utf-8” > < / script>
</ HEAD>
<BODY>
    <h1>聊天室  </ h1>
    <div id = “content” name = “name” style = “ overflow-y：scroll; width：400px; height：300px; border：solid 1px＃000” > </ div>
    <br />
    <DIV>
        <input type = “text” id = “msg” style = “ width：200px;” >
    </ DIV>
    <button id = “submit” > 提交</ button>
<SCRIPT>
    var socket = io.connect（'服务器地址' ）; //如：' http ://10.9.164.98: 8081 '    
    const content = document.getElementById（'content' ）
    document.querySelector（'＃submit' ）。 addEventListener（'click' ， function （）{
        var msg2 = msg.value
        socket.emit（'receive' ，msg2）
        msg.value = ''
        content.innerHTML + = msg2 + '<br/>'
    }， false ）

    socket.on（'message' ， function （msg）{
       content.innerHTML + = msg + '<br/>'
    }）
< / script>
</ BODY>
</ HTML>

3.webSocket（H5的功能，多用于移动端）

目录结构

在这里插入图片描述

3.1.webSocketServer.js

const WebSocket = require（'ws' ）
const ws = new WebSocket.Server（{port： 8080 }）

让 客户 = {}
让 clientName = 0

ws.on（'connection' ，（client） => {
    client.name = ++ clientName
    客户[client.name] = 客户端

    client.on（'message' ，（msg） => {
        的console.log（MSG）//客户端接受到的信息
        广播（客户端，消息）
    }）

    client.on（'close' ，（） => {
        删除 客户端[client.name]
        console.log（client.name + '离开了〜' ）
    }）
}）

function broadcast（client，msg）{
    对于 （VAR 键 在 客户端）{
        客户[key] .send（client.name + '说：' + msg）
    }
}

3.2.webClient.js

const ws = new WebSocket（' ws：// localhost：8080 / ' ）

ws.onopen = （） => {
    ws.send（'大家好' ）
}

ws.onmessage = （msg） => {
    const content = document.getElementById（'content' ）
    content.innerHTML + = msg.data + '<br/>'
}

ws.onerror = （err） => {
    的console.log（ERR）;
}

ws.onclose = （） => {
    console.log（' closed〜' ）;
}

3.3 index.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> WebSocket </ title>
<script src = “WsClient.js” charset = “utf-8” > < / script>
</ HEAD>
<BODY>
    <H1> 聊天室 </ H1> 
    <div id = “content” name = “name” style = “ overflow-y：scroll; width：400px; height：300px; border：solid 1px＃000” > </ div>
    <br />
    <DIV>
        <input type = “text” id = “msg” style = “ width：200px;” >
    </ DIV>
    <button id = “submit” > 提交</ button>
<SCRIPT>
    document.querySelector（'＃submit' ）。 addEventListener（'click' ， function （）{
            var msg2 = msg.value
            ws.send（MSG2）
            msg.value = ''
    }， false ）
< / script>
</ BODY>
</ HTML>

3.4 server.js

const express = require（'express' ）

const app = express（）

app.use（express.static（__ dirname + '/ client' ））

app.listen（3000 ， 'localhost' ，（） => {
    console.log（'localhost：3000' ）;
}）

苏废物~~

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
socket几种解决方式

SocketServer.jsconst net = require（'net' ）const server = new net.createServer（）让客户 = {}让 clientName = 0server.on（'connection' ，（client） => { client.name = ++ clientName 客户[...
复制链接

扫一扫