在我们正式开始前,各位小伙伴请允许我先叨叨下。最近认为做一个神神叨叨的程序员要比高冷的程序员可爱一些,所以在抖腿背景音乐,我摇着头抖着腿敲下这篇文,说起来最近爱上抖腿电音是源于最近爱上B站鬼畜区了。好啦不废话啦,太叨叨也是惹人嫌的,毕竟我还是想做一个可爱的孩子。
因为我已经npm 好了express所以没有npm express的小伙伴们可以先
npm install express --save
若果你不想npm express 也可以,原生的node http 请求的服务端代码下面也会贴出,然后是
npm install ws --save
以下是express下的websocket
客户端代码(想要更清楚的了解websocket和其api的小伙伴们可以去看看阮一峰大神的websocket教程或者百度,相关教程代码很多的,因为我也是新手来着所以这里我就只实现了一些功能)
功能代码部分
服务端代码(app.js)
var http = require('http');
var url=require('url');
var WebSocket=require('ws');
var server = http.createServer(app);
var wss=new WebSocket.Server({ server:server });
wss.broadcast=function broadcast() { //服务端广播消息
wss.clients.forEach(function each (client) {
if(client.readyState==WebSocket.OPEN){
client.send("开始通信吧!");
}
})
}
wss.on('connection',function connection(ws,req) {
var s;
ws.on('message',function incoming(message) {
console.log(message);
var smg = JSON.parse(message);
// 把传过来的字符串又json化了,别问我为什么这么无聊
console.log(smg.msg + " " + smg.name);
if(smg.msg!="") {
s = smg.name + "说:" + smg.msg;
ws.send(s);
}else {
ws.send("说些什么吧,别这么高冷呀")
}
});
wss.broadcast();
})
ok以后运行express启动文件就可以啦
下面是运行截图
到此一个简单express下的websocket通信就完成了
下面是原生部分
服务端代码
const http=require('http');
const url=require('url');
const fs=require('fs');
var WebSocket=require('ws');
var fun=function (request,response) {
var stream=fs.createReadStream('../views/ws.html',{flag:'r',encoding:'utf8'});
stream.pipe(response);
}
var server =http.createServer(fun).listen(8000);
var wss=new WebSocket.Server({ server:server });
wss.broadcast=function broadcast() {
wss.clients.forEach(function each (client) {
if(client.readyState==WebSocket.OPEN){
client.send("开始通信吧!");
}
})
}
wss.on('connection',function connection(ws,req) {
var s;
//const location = url.parse(req.url, true);
ws.on('message',function incoming(message) {
console.log(message);
var smg = JSON.parse(message);
console.log(smg.msg + " " + smg.name);
if(smg.msg!="") {
s = smg.name + "说:" + smg.msg;
ws.send(s);
}else {
ws.send("说些什么吧,别这么高冷呀")
}
});
wss.broadcast();
})
ws.html的内容
Title
因为没有写静态资源请求部分的代码所以界面略丑,大家将就着看吧。