6、用户加入房间、离开房间提示

app.js

/*** 服务端*//*** 1 将nodejs-websock包引进来*/
var ws = require("nodejs-websocket");/*** 2 创建一个WebSocket服务，建立TCP连接,* conn就是连进来的连接* server 监听2333端口*/
var server = ws.createServer(function(conn) {console.log("New connection"); // 表示新的连接进来了/*** conn绑一个text事件,并接受一个回调*/conn.on("text", function(str) {console.log(str);// 给客户端返回信息var data = JSON.parse(str);switch (data.type) {case "setname":conn.nickname = data.name;boardcast(JSON.stringify({name: "Server",text: data.name + "加入了房间"}));break;case "chat":boardcast(JSON.stringify({name: conn.nickname,text: data.text,type: "chat"}));break;default:break;}});// 退出房间提示conn.on("close", function() {boardcast(JSON.stringify({name: "Server",text: conn.nickname + "离开了房间"}));});conn.on("error", function(err) {console.log(err);});}).listen(2333);/*** 编写广播的方法*/
function boardcast(str) {// connections包含所有的conn,即自己的和别人的都包含/*** 即先拿到所有的链接,给他做一个循环,这样就能拿到它得每一个对象*/server.connections.forEach(function(conn) {conn.sendText(str);});
}

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>Document</title>
</head><body><input type="text" id="name"><button id="setname"></button><input type="text" id="text"><button id="btn" type="button">发送</button><div id="container"></div><script>/*** 这里我们创建一个WebSocket,里面填上服务端连接及端口号* ws 表示它的协议* */var ws = null;/*** 向服务端发送消息*/document.getElementById('setname').onclick = function () {var name = document.getElementById('name').value;if (name === '') return console.log('名字为空');ws = new WebSocket('ws://localhost:2333');ws.onopen = function () {ws.send(JSON.stringify({ name: name, type: 'setname' }));}document.getElementById('btn').onclick = send;document.getElementById('text').onkeyup = function(e){if(e.keyCode !== 13) return;send();}/*** 接受服务端信息*/ws.onmessage = function (e) {var con = document.getElementById('container');con.insertBefore(createChatParel(JSON.parse(e.data)), con.children[0]);}document.getElementById('setname').setAttribute('disabled', true);}function createChatParel(data) {var name = data.name;var text = data.text;var div = document.createElement('div');var span1 = document.createElement('span1');var span2 = document.createElement('span2');span1.innerHTML = name + ' ' + (new Date()).toString();span2.innerHTML = text;span1.style.color = '#00f';span1.style.fontWeight = '900';div.appendChild(span1);div.appendChild(document.createElement('br'));div.appendChild(span2);return div;}function send() {var text = document.getElementById('text');if (text.value === '') return;ws.send(JSON.stringify({text: text.value,type: "chat"}));text.value = '';}</script>
</body></html>

package-lock.json

{"requires": true,"lockfileVersion": 1,"dependencies": {"nodejs-websocket": {"version": "1.7.1","resolved": "https://registry.npmjs.org/nodejs-websocket/-/nodejs-websocket-1.7.1.tgz","integrity": "sha1-zM+7qCO/HPqWgPFoq3q1MSHkhBA="}}
}

6、用户加入房间、离开房间提示相关推荐

直播里面用户进入房间离开房间效果
最终的实现效果: 用户进入房间 public void insertItem(UserBean userBean) {if (userBean == null) {return;}int positi ...
thinkphp6 websocket-room的加入房间+离开房间+房间消息发送
先命令行建立WsJoin(加入房间) WsLeave(离开房间) RoomTest(房间发送文件) 客户端代码 <html><head></head><bod ...
python使用正则表达式判别用户输入密码的强弱并提示
python使用正则表达式判别用户输入密码的强弱并提示对于用户输入的密码.系统要去分析和判别,密码是否合法是否太简单以至于非常容易被试出来,来提高系统的稳健程度: 密码要强大需要满足: 1,最好9个 ...
用户登录 kibana 时，提示 “no permissions...” ，导致用户无法查看 log
Get error in Kibana and cannot view any logs a admin user cannot see any logs in Kibana 1. 背景 2. 环境 ...
c#//创建一个包含 10 个元素的 int 一维数组，从键盘接收其值；当用户输入非法时，提示重新输入；暂时没有实现，。
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...
Error !！ftp服务在禁锢本地用户在家目录后，提示远程主机关闭连接
文章目录报错!ftp服务在禁锢本地用户在家目录后,提示远程主机关闭连接故障背景故障原因故障解决报错!ftp服务在禁锢本地用户在家目录后,提示远程主机关闭连接故障背景为了系统安全,需要设置 ...
oracle用户密码已过期,oracle提示登录密码过期完美解决方法
oracle 提示登录密码过期解决 1.登录到oracle的服务器 2.切换到oracle 用户 3.设置到当前操作的实例名:export ORACLE_SID=XXX 4.连接数据库的命令行模式: ...
微信小程序直播商品与直播房间管理时提示：api unauthorized hints: [mhcddo3Me-lLeTBA!]/r/napi 功能未授权
最近写微信小程序直播商品与直播房间后台管理时,调用接口一直提示:api unauthorized hints: [mhcddo3Me-lLeTBA!]/r/napi 功能未授权. 后来一查,原来是微信 ...
vue判断离开当前页面_js监听用户进入和离开当前页面
VisibilityChange 事件:用于用户是否离开当前页面 // 页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden // 监听 v ...

6、用户加入房间、离开房间提示

6、用户加入房间、离开房间提示相关推荐

最新文章

热门文章