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

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

  • 威尼斯手机客户端网站
  • 2019-08-26
  • 200人已阅读
简介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:0margin:0list-style:none}#div1{ position:relativewidth:500px height:400px border:1px solid red}#text{ position:absoluteleft:0bottom:0width:80% height:100px}#btn1{ position:absoluteright:0bottom:0width: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:namevalue: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(wsreq){ 发送 接收 接收 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(reqres){ var url = req.url fs.readFile("www"+urlfunction(errdata){ 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