您现在的位置是:网站首页> 内容页

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

  • bao1618.com
  • 2019-03-25
  • 352人已阅读
简介websocket一种通信协议ajax/jsonp单工通信websocket全双工通信性能高速度快2种方式:1、前端的websocket2、后端的socket.io一、后端

websocket 一种通信协议

ajax/jsonp 单工通信

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


2种方式:

1、前端的websocket
2、后端的 socket.io

一、后端socket.io

https://socket.io/安装: cnpm i socket.io

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

后端:

1、创建httpServer2、创建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

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{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;}</style><!--<script src="/socket.io/socket.io.js"></script>--><script src="https://cdn.bootcss.com/socket.io/2.1.1/socket.io.js"></script><script>//http://10.30.155.92//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 = `<strong>${data.name}</strong> <span>${data.value}</span>` ; oUl.appendChild(oLi); oUl.scrollTop = oUl.scrollHeight; }};</script></head><body><div id="div1"> <ul id="ul1"> <!--<li><strong>张三</strong> <span>聊天内容</span></li>--> </ul> <textarea id="text"></textarea> <input id="btn1" type="button" value="发送"/></div></body></html>


前端H5 WebSocket

ws: httpwss: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

https://www.npmjs.com/package/ws

var wss = new WebSocket({server:httpServer});wss.on("connection",function(ws,req){ 发送 接收 接收 ws.onmessage(function(ev){ //数据 ev.data }); 发送: ws.send(数据); 数据 最好只能是字符串!!! });

==exp:==

h5.html

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><script>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"})); }; }</script></head><body>h5 WebSocket<input id="btn1" type="button" value="发送"/><span id="s1">1111</span></body></html>

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); } }); }); });

爱我所爱无怨无悔

文章评论

Top