前端websocket实现简易聊天室

分为客户端和服务端，客户端就是一个简单的html页面，服务端使用node进行编写。具体代码如下

index.html

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>websoket</title>
</head>
<body><h1>chat room</h1><input type="text" id="msg" /><button id="send">发送</button><script type="text/javascript">var websocket = new WebSocket("ws://127.0.0.1:3001/");function showMsg(str){var div = document.createElement('div');div.innerHTML = str;document.body.appendChild(div)}websocket.onopen=function(){console.log("open");// 用户发送文字document.getElementById('send').onclick = function() {var txt = document.getElementById('msg').value;if (txt) {websocket.send(txt);}}}websocket.onclose = function() {console.log("close");}websocket.onmessage = function(e) {console.log(e.data);showMsg(e.data);}</script>
</body>
</html>

server.js

var ws = require("nodejs-websocket"). // 引入webSocket模块var port = 3001;var clientCount = 0;  // 用来区分不同的用户var server = ws.createServer(function (conn) {console.log("New connection")clientCount++  // 新建一个webScoket连接就加一，保证用户名唯一性conn.nickname = "user" + clientCount// 用户进入，广播给所有的用户broadcast("******* "+conn.nickname + " comes in *******");conn.on("text", function (str) {console.log("Received "+str)broadcast(conn.nickname + " say: " + str)})  // 用户发送文字，广播给所有的用户conn.on("close", function (code, reason) {broadcast("******* " + conn.nickname + " left *******");}) // 用户离开，广播给所有的用户conn.on("error", function(err) {console.log("error: "+err);})
})// 端口监听
server.listen(port,'0.0.0.0',()=>{console.log('websocket服务启动-使用端口',port);
});console.log("websocket server listening on " + port);// 遍历所有的连接进行遍历发送文字
function broadcast (str) {server.connections.forEach(function (connection) {connection.sendText(str)})
}

使用方法

创建index.html和server.js文件，在server文件目录下npm init初始化package.json文件，并安装nodejs-websocket

npm install nodejs-websocket --save -D

启动server.js

node server.js

多开几个index.html页面就能体验到效果了

前端websocket实现简易聊天室相关推荐

基于Node.js + WebSocket 的简易聊天室
代码地址如下: http://www.demodashi.com/demo/13282.html Node.js聊天室运行说明 Node.js的本质就是运行在服务端的JavaScript.Node.j ...
原创回归前端学习第21天-实现俄罗斯方块小游戏3（深入了解Websocket~优化简易聊天室）
对昨天的简易聊天室进行优化增加一个mes对象,将传送的数据放在对象里增加一个mes对象,将传送的数据放在对象里 wsServer.js中替换代码 broadcast(conn.nickname + ...
Vue3 -- 基于Websocket实现简易聊天室
文章目录标题代码地址表情包资源 chat.data.ts index.vue 标题接上一篇博文这里使用 Vue3 + Typescript + Websocket 实现在线聊天功能的前端部分 ...
webSocket——Vue2简易聊天室
WebSocket原生实现 WebSocket-Vue2 WebSocket-Vue3 Vue2版本实现前端实现目录结构 login.vue 登录 <template><div& ...
websocket实现简易聊天室
websocket支持全双工通信,也就是客户端和服务端双向通信.以前都是通过http轮询的方式实现实时的,这非常耗性能.Websocket不仅能节省资源和带宽,还能实现长链接的作用前端通过创建Web ...
前端websocket打造实时聊天室
文章目录前言 1.登陆页面 1.1 entry.html 1.2 entry.js 2.聊天页面 2.1 index.html 2.2 index.js 3.nodejs搭建的服务器 4.目录结构 ...
WebSocket——vue3简易聊天室
WebSocket原生实现 WebSocket-Vue2 WebSocket-Vue3 前端实现目录结构登录(LoginView.vue) <template><div clas ...
nodejs websocket 实现简易聊天室功能
文章目录 1. 服务端 app.js 代码 2. 客户端 app.html 代码 3. 样式代码 app.css 4. nodemon 辅助开发首先说明,以下代码都是基于 Nodejs+webSoc ...
Java WebSocket实现简易聊天室
一.Socket简介 Socket又称"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求.Socket的英文原义是"孔"或 ...

前端websocket实现简易聊天室

使用方法

前端websocket实现简易聊天室相关推荐

最新文章

热门文章