Node.js 实现Websocket实时通信小Demo

最新推荐文章于 2023-04-03 09:37:00 发布

努力成为好爸爸

最新推荐文章于 2023-04-03 09:37:00 发布

阅读量359

点赞数

分类专栏： Node.js

Node.js 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

原文地:https://blog.csdn.net/Thousa_Ho/article/details/79845585

一个小Demo模拟实时通信,主要借助socket.io框架实现(对websocket的进一步封装）

1.环境准备：

1） Node.js 环境 –> 官网下载安装即可
2） socket.io.js文件 –> 同样官网下载 https://cdnjs.com/libraries/socket.io
3）按照官网文档指示，安装模块

npm install socket.io
1
4）编写html和js文件

页面很简陋，点击按钮将输入框内容发送到服务端，收到信息显示到下方（不同状态信息不同颜色标识）

<html>
<head>
<meta charset="utf-8"/>
<title>WebSocket</title>
<script src="socket.io.js"></script>
</head>
<body>
<input type="text" id="sendText">
<button id="sendBtn">发送</button>
<div id="recvText"></div>
<script type="text/javascript">
//建立连接
var socket = io("ws://localhost:3000/");
//发送消息
document.getElementById("sendBtn").onclick = function(){
var sendMsg = document.getElementById("sendText").value;
socket.emit('client', sendMsg);
}
//接收消息
socket.on('enter',function(data){
showMessage(data,'enter');
});
socket.on('server',function(data){
showMessage(data,'server');
});
socket.on('leave',function(data){
showMessage(data,'leave');
});