1.net的socket (思想)
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)
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');
})