Socket的三种解决方案

xiaoxiao2022-07-07 197

1. .net的socket (思想)

1.1 SocketServer.js const net = require('net') const server = new net.createServer() let clients = {} let clientName = 0 server.on('connection', (client) => { client.name = ++clientName clients[client.name] = client //对客户端发送数据的监听 client.on('data', (msg) => { // console.log('客户端传来：' + msg); broadcast(client, msg.toString()) }) client.on('error', (e) => { console.log('client error' + e); client.end() }) //客户端下线提示 client.on('close', (data) => { delete clients[client.name] console.log(client.name + ' 下线了'); }) }) //进行消息广播 function broadcast(client, msg) { for (var key in clients) { clients[key].write(client.name + ' 说：' + msg) } } server.listen(9000) 1.2 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()) say() }) socket.on('error', function (err) { console.log('error' + err); }) socket.on('close', function () { console.log('connection closeed'); }) //用户端命令行输入信息 const r1 = readline.createInterface({ input: process.stdin, output: 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) { //广播信息 data message receive socket.on('receive', (msg) => { socket.broadcast.emit('message', msg); }) }); server.listen(8081, 'ip地址'); 2.2 package.json { "dependencies": { "express": "^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>gp6 交流区</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 }) let clients = {} let clientName = 0 ws.on('connection', (client) => { 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) } } 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)