java socket.io实现即时通讯_9、socket.io,websocket 前后端实时通信,(聊天室的实现)

websocket 一种通信协议

ajax/jsonp 单工通信

websocket 全双工通信 性能高 速度快

2种方式：

1、前端的websocket

2、后端的 socket.io

一、后端socket.io

cnpm i socket.io

接收on  发送emit ——可以发送任意类型的数据

后端：

1、创建httpServer

2、创建wsServer var ws = io(httpServer);

3、连接

ws.on("connect",function(socket){

//45 发送或者接收

发送 socket.emit("名称"，数据);

广播 socket.broadcast.emit("名称"，数据);

接收 socket.on(名称，function(data——数据){

});

});

前端：

1、引入js src="/socket.io/socket.io.js"

2、连接

var ws = io("ws://ip:port");

3、发送接收 on/emit

聊天室：

chat.html

无标题文档

*{padding:0;margin:0;list-style:none;}

#div1{ position:relative;width:500px; height:400px; border:1px solid red;}

#text{ position:absolute;left:0;bottom:0;width:80%; height:100px;}

#btn1{ position:absolute;right:0;bottom:0;width:20%; height:100px;}

#ul1{width:100%; height:300px; background:#ccc; overflow-y:auto;}

#ul1 li{ line-height:30px; border-bottom:1px dashed red;}

//var ws = io("ws://10.30.155.92:9000");

//var ws = io("http://10.30.155.92:9000");

//var ws = io();

var ws = io.connect("ws://10.30.155.92:9000");//标准写法 ws://

window.onload = function(){

var oUl = document.getElementById("ul1");

var oText = document.getElementById("text");

var oBtn = document.getElementById("btn1");

var name = prompt("请输入你的用户名")//"张三";

oBtn.onclick = function(){

//发送数据

var data = {name:name,value:oText.value};

ws.emit("msg",data);

createLi(data);

};

//接收数据 1创建dom

ws.on("msg_all",function(data){

console.log(data);

createLi(data);

});

function createLi(data){

//创建dom

var oLi = document.createElement("li");

oLi.innerHTML = `${data.name} ${data.value}`;

oUl.appendChild(oLi);

oUl.scrollTop = oUl.scrollHeight;

}

};

chat.js

var http = require("http");

var io = require("socket.io");

var fs = require("fs");

//创建http服务

var httpServer = http.createServer(function(req,res){

var url = req.url;

fs.readFile("www"+url,function(err,data){

if(err){

res.end("404");

} else {

res.end(data);

}

});

});

httpServer.listen(9000);

//创建websockt服务

var ws = io(httpServer);

ws.on("connection",function(socket){

console.log("wsServer");

//接收数据

socket.on("msg",function(data){

console.log(data);

//发送数据广播

socket.broadcast.emit("msg_all",data);

});

});

前端H5 WebSocket

ws: http

wss:https

前端配置:

var ws = new WebSocket("ws://ip:port");

ws.onopen = function(evt) {

console.log("Connection open ...");

ws.send("Hello WebSockets!");

};

ws.onmessage = function(evt) {

console.log( "Received Message: " + evt.data);

ws.close();

};

ws.onclose = function(evt) {

console.log("Connection closed.");

};

后端：npm i ws

npm i ws

var wss = new WebSocket({server:httpServer});

wss.on("connection",function(ws,req){

发送 接收

接收

ws.onmessage(function(ev){

//数据 ev.data

});

发送：

ws.send(数据);

数据 最好只能是字符串！！！

});

exp:

h5.html

无标题文档

var ws = new WebSocket("ws://localhost:9000");

//建立连接

ws.onopen = function(ev) {

console.log("连接成功");

};

//接收数据

ws.onmessage = function(ev) {

console.log( "接收数据",ev.data);//server--->client

//发送数据

//ws.send("client--->server");

try{

//只处理json

var json = JSON.parse(ev.data);

console.log(json);

if(json.type == "click"){

var oSpan = document.getElementById("s1");

oSpan.innerHTML = json.value;

}

}catch(e){

}

};

//连接关闭

ws.onclose = function(evt) {

console.log("连接关闭");

};

window.onload = function(){

var oBtn = document.getElementById("btn1");

oBtn.onclick = function(){

//发送数据 只能发送字符串

ws.send(JSON.stringify({type:"click",value:"abc"}));

};

}

h5 WebSocket

1111

h5.js:

var http = require("http");

var WebSocket = require("ws");

var fs = require("fs");

//创建http服务

var httpServer = http.createServer(function(req,res){

var url = req.url;

fs.readFile("www"+url,function(err,data){

if(err){

res.end("404");

} else {

res.end(data);

}

});

});

httpServer.listen(9000);

//创建websockt服务

var wss = new WebSocket.Server({ server:httpServer });

wss.on('connection', function connection(ws) {

console.log("wsServer");

//发送 send

ws.send("server--->client");

//接收

ws.on('message', function(message) {

console.log(message);

//ws.send(message);

//广播

wss.clients.forEach(function(client) {

if (client.readyState === WebSocket.OPEN) {

client.send(message);

}

});

});

});

爱我所爱无怨无悔